遇到一個(gè)需求，需要實(shí)現(xiàn)和移動(dòng)端短信輸入一樣，輸入內(nèi)容后，光標(biāo)會(huì)進(jìn)入下一個(gè)輸入框

需要用到2個(gè)事件?
keydown事件發(fā)生在鍵盤的鍵被按下的時(shí)候

keyup?事件在按鍵被釋放的時(shí)候觸發(fā)

文章來源地址http://www.zghlxwxcb.cn/news/detail-828744.html

<template>
  <div class="box">
    <el-form class="demo-ruleForm" ref="form" :model="form" :rules="rules">
      <el-form-item class="form-item" label="身高" prop="Height">
        // 此處為了做校驗(yàn)處理
        <el-input type="text" v-model="Height" v-show="false"></el-input>
        <span v-for="(item,index) in HeightList" :key="index">
          <input type="text" v-model="item.val" class="border-input" maxlength="1" @keyup="nextFocu($event,index, 1)" @keydown="changeValue(index,$event)" />
        </span>
        <span class="text">cm</span>
      </el-form-item>
    </el-form>
  </div>
</template>
 
<script>
const form = {
  Height: '', // 身高
  Weight: '' // 體重
}
export default {
  data () {
    const validatePass = (rule, value, callback) => {
      if (value.length < 3) {
        callback(new Error('請(qǐng)輸入'))
      } else if (isNaN(value)) {
        callback(new Error('請(qǐng)輸入數(shù)字'))
      } else {
        if (value <= 99) {
          callback(new Error('小于99'));
        } else if (value >= 251) {
          callback(new Error('大于251'))
        } else {
          callback()
        }
      }
    }
    const validatePass2 = (rule, value, callback) => {
      console.log(value)
      if (value.length < 4) {
        callback(new Error('請(qǐng)輸入'))
      } else if (isNaN(value)) {
        callback(new Error('請(qǐng)輸入數(shù)字'))
      } else {
        if (value < '0200') {
          callback(new Error('不能以0開頭'))
        } else if (value > '2000') {
          callback(new Error('不能大于2000'))
        } else {
          callback()
        }
      }
    }
    return {
      Height: '', // 身高
      Weight: '', // 體重
      form: { ...form },
      HeightList: [
        {
          val: ''
        },
        {
          val: ''
        },
        {
          val: ''
        }
      ],
      WeightList: [
        {
          val: ''
        },
        {
          val: ''
        },
        {
          val: ''
        },
        {
          val: ''
        }
      ],
      rules: {
        Height: [
          { validator: validatePass, trigger: ['focus', 'blur', 'change'] },
        ],
        Weight: [
          { validator: validatePass2, trigger: ['focus', 'blur', 'change'] },
        ]
      }
    }
  },
  methods: {
    // 下一個(gè)文本框
    nextFocu (el, index, type) {
      let list = this[type === 1 ? 'HeightList' : 'WeightList'];
      let field = type === 1 ? "Height" : "Weight";
      let val = list[index].val;
      var dom = document.getElementsByClassName(el.srcElement.className),
        currInput = dom[index],
        nextInput = dom[index + 1],
        lastInput = dom[index - 1];
      if (el.keyCode != 8) {
        //禁止輸入非數(shù)字類型
        if (!val.replace(/\D/g, '')) {
          list[index].val = "";
          return
        }
        if (index < (list.length - 1)) {
          nextInput.focus();
        } else {
          currInput.blur();
        }
      } else {
        if (index != 0) {
          lastInput.focus();
        }
      }
      // 數(shù)據(jù)轉(zhuǎn)成字符串
      this.form[field] = list.map(item => { return item.val }).join('')
      // 重新賦值
      this[field] = this.form[field]
    },
    /*當(dāng)鍵盤按下的時(shí)候清空原有的數(shù)*/
    changeValue (index, el) {
      if (el.keyCode !== 32) {
        this.HeightList[index].val = "";
      }
    }
  }
}
</script>
 
<style lang="less" scoped>
.border-input {
  background: #ffffff;
  width: 24px;
  font-size: 24px;
  height: 24px;
  margin-left: 8px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.box {
  width: 400px;
  margin: 0 auto;
  border: 1px solid #ccc;
}
/deep/.el-form-item__content {
  text-align: right;
}
/deep/ .el-form-item__error {
  position: absolute;
  right: 20px;
}
</style>

到了這里，關(guān)于Vue實(shí)現(xiàn)多個(gè)input輸入，光標(biāo)自動(dòng)聚焦到下一個(gè)input的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！