Vue实现版本号输入、删除时光标自动移动到上、下一个输入框前端demo

前言

首先声明,我平时的工作主要是后端JAVA开发,该demo为前端练习,记录一下劳动成果,希望对大家有所帮助,如果有写的不妥的地方,欢迎大家指正,一起学习、共同进步。

背景

手机验证码、银行卡输入密码等很多场景,在我们输入或者删除的时候,光标都会自动的定位到我们当前输入的输入框,模拟这一场景,我决定简单实现一下输入、删除版本号时,光标自动移动、定位。

假设:系统版本号分为主版本号、次版本号、修订号、构建号,一共这四个定义,同时每个字段最多只允许输入两位。最大的版本号则为99.99.99.99。

代码如下:

这四个版本号我决定使用四个输入框来模拟:

 给这四个版本号初始化:

   data() {
    return {
     params: {
        version: undefined,
        //主版本号
        major: undefined,
        //次版本号
        minor: undefined,
        //修订号
        patch: undefined,
        //构建号
        build: undefined,
      }
    }
  }

使用@keyup事件来调用moveFocus方法,完成光标定位。(要使用@keyup.native,否则键盘事件不生效),在methods中添加moveFocus方法。

在这里我是通过判断当前输入的长度来触发光标移动。

methods: {
    moveFocus(event,prevInput,nextInput) {
      if (event.key === 'Backspace' && event.target.value.length === 0 && prevInput) {
        this.$refs[prevInput].focus();
      } else if (event.key !== 'Backspace' && event.target.value.length >= 2 && nextInput) {
        this.$refs[nextInput].focus();
      }
    }

读到这里别忘记点赞、收藏、关注哦,一键三连!!!

你可能感兴趣的:(前端分享,前端,vue.js,javascript)