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

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

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

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

<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>