inputNextFocus vue - js 跳转 下一个 tab
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="{width: 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>
---------------------------------------------
生活的意义就是你自己知道你要做什么,明确目标。没有目标,后面都是瞎扯!
https://pengchenggang.gitee.io/navigator/
SMART原则:
目标必须是具体的(Specific)
目标必须是可以衡量的(Measurable)
目标必须是可以达到的(Attainable)
目标必须和其他目标具有相关性(Relevant)
目标必须具有明确的截止期限(Time-based)
生活的意义就是你自己知道你要做什么,明确目标。没有目标,后面都是瞎扯!
https://pengchenggang.gitee.io/navigator/
SMART原则:
目标必须是具体的(Specific)
目标必须是可以衡量的(Measurable)
目标必须是可以达到的(Attainable)
目标必须和其他目标具有相关性(Relevant)
目标必须具有明确的截止期限(Time-based)