Vue实现多个input输入，光标自动聚焦到下一个input-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue实现多个input输入，光标自动聚焦到下一个input。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

遇到一个需求，需要实现和移动端短信输入一样，输入内容后，光标会进入下一个输入框

需要用到2个事件
keydown事件发生在键盘的键被按下的时候

keyup 事件在按键被释放的时候触发

Vue实现多个input输入，光标自动聚焦到下一个input,javascript,开发语言,ecmascript 文章来源地址https://www.toymoban.com/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">
        // 此处为了做校验处理
        <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('请输入'))
      } else if (isNaN(value)) {
        callback(new Error('请输入数字'))
      } 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('请输入'))
      } else if (isNaN(value)) {
        callback(new Error('请输入数字'))
      } 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: {
    // 下一个文本框
    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) {
        //禁止输入非数字类型
        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();
        }
      }
      // 数据转成字符串
      this.form[field] = list.map(item => { return item.val }).join('')
      // 重新赋值
      this[field] = this.form[field]
    },
    /*当键盘按下的时候清空原有的数*/
    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>

到了这里，关于Vue实现多个input输入，光标自动聚焦到下一个input的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！