【vue模拟移动端 数字输入框】

前言：看到移动端的密码输入框感觉很好用，想在PC端复现一下

展示图

我感觉这个输入方式可以有效限制输入的字符数

一、设计思路

每一个框是一个独立的组件，重点是如何监听字符数以及如何切换输入的位置

二、具体实现

HTML

<el-form>
            <el-form-item label="邮编" id="zipCode">
              <el-input v-model="input.one" id="zipone" type="text" maxlength="1" style="width:40px" @focus="changeInput"></el-input>
              <el-input v-model="input.two" id="ziptwo" type="text" maxlength="1" style="width:40px; padding-left:10px;" @focus="changeInput"></el-input>
              <el-input v-model="input.three" id="zipthree" type="text" maxlength="1" style="width:40px; padding-left:10px;" @focus="changeInput"></el-input>
              <el-input v-model="input.four" id="zipfour" type="text" maxlength="1" style="width:40px; padding-left:10px;" @focus="changeInput"></el-input>
              <el-input v-model="input.five" id="zipfive" type="text" maxlength="1" style="width:40px; padding-left:10px;" @focus="changeInput"></el-input>
              <el-input v-model="input.six" id="zipsix" type="text" maxlength="1" style="width:40px; padding-left:10px;" @focus="changeInput"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getFunction('postCode')">校验</el-button>
            </el-form-item>
          </el-form>

JAVASCRIPT

const input = reactive({
    
    
      one: null,
      two: null,
      three: null,
      four: null,
      five: null,
      six: null
    })

    const output = reactive({
    
    
      postCode: ''
    })

    const zipCode = reactive(['zipone', 'ziptwo', 'zipthree', 'zipfour', 'zipfive', 'zipsix'])

在写的时候发现el-input里面嵌套了很多层，因此使用getElementsByTagName无法准确捕捉到相关标签对象，因此定义了不同的id
当输入字符串长度 = 设置的最大长度
焦点应该移到下一个input
因此先找出当前input id，找到对应zipCode的下一个input id
然后focus（）这个id，光标就会移动到这里

删除也是一样，找前一个input id

我觉得我这个方法写的很复杂，如果有更好的改进方法可以跟我交流

/**更新input状态 */
    const changeInput = (event) => {
    
    
      var nextZip = ''
      document.getElementById(event.target.id).addEventListener('keyup', function () {
    
    
        if (event.target.value.length === event.target.maxLength) {
    
    
          zipCode.filter((x, index) => {
    
    
            if (x === event.target.id) {
    
    
              index === zipCode.length - 1 ? nextZip = zipCode[index] : nextZip = zipCode[index + 1]
            }
          })
          document.getElementById(nextZip).focus()
        } else if (event.target.value.length === 0) {
    
    
          zipCode.filter((x, index) => {
    
    
            if (x === event.target.id) {
    
    
              index === 0 ? nextZip = zipCode[index] : nextZip = zipCode[index - 1]
            }
          })
          document.getElementById(nextZip).focus()
        }
      })
    }

 /**调取不同方法 */
    const getFunction = (type) => {
    
    
      switch (type) {
    
    
        case 'postCode':
          var num = input.one + input.two + input.three + input.four + input.five + input.six
          output.postCode = isPostCode(num)
          if (output.postCode === true) {
    
    
            proxy.$message.success('校验成功')
          } else {
    
    
            proxy.$message.error('校验失败！')
          }
          break;

        default:
          break;
      }
    }

const isPostCode = (value) => {
    
    
  return /^[1-9][0-9]{5}$/.test(value.toString())
}

export default isPostCode