Vue实现多个input输入，光标自动聚焦到下一个input

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

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

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

  

    
      
        // 此处为了做校验处理
        
        
          
        
        cm
      
    
  

 

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 = 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  '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  { return item.val }).join('')
      // 重新赋值
      this[field] = this.form[field]
    },
    /*当键盘按下的时候清空原有的数*/
    changeValue (index, el) {
      if (el.keyCode !== 32) {
        this.HeightList[index].val = "";
      }
    }
  }
}

 

.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;
  bo服务器托管网rder: 1px solid #ccc;
}
/deep/.el-form-item__content {
  text-align: right;
}
/deep/ .el-form-item__error {
  position: absolute;
  right: 20px;
}

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: shopee西班牙站选品：如何在Shopee西班牙站点上进行选品策略

在Shopee西班牙站点进行选品时，卖家需要考虑一系列策略，以确保产品符合当地市场需求并取得良好的销售业绩。以下是一些关键策略，卖家可以参考并应用到自己的选品过程中。 先给大家推荐一款shopee知虾数据运营工具知虾免费体验地址（复制浏览器打开）：D。dDqb…