inputNextFocus vue - js 跳转 下一个 tab
<template>
<Input v-model="val1"
ref="inputBmRef"
:class="val1.toUpperCase() === answer ? 'md-checkbox-outline' : 'md-code'"
:prefix="val1.toUpperCase() === answer ? 'md-checkbox-outline' : 'md-code'"
:style="{ this.answer.length * 15 + 15 + 30 + 'px',
}" />
</template>
<script>
export default {
name: 'InputBm',
props: {
answer: {
type: String,
default: '',
},
},
components: {},
data () {
return {
val1: ''
}
},
watch: {
val1 (val) {
if (val.toUpperCase() === this.answer) {
this.inputNextFocus()
}
},
},
computed: {},
methods: {
inputNextFocus () {
const thisInput = this.$refs.inputBmRef.$el.getElementsByTagName('input')[0]
const inputs = document.getElementsByTagName("input")
for (var i = 0; i < inputs.length; i++) {
if (inputs[i] === thisInput) {
// console.info('找到啦!')
const tIndex = i + 1
if (tIndex < inputs.length - 1) { // 不是最后一个 就跳下一个 - 最后一个就不跳了
inputs[tIndex].focus()
break
}
}
}
},
},
created () { },
activated () { },
mounted () { },
beforeDestroy () { }
}
</script>
<style>
.md-checkbox-outline input {
background-color: #ace7a8;
}
</style>