功能需求:做一个身份证后四位输入或汽车牌照输入,每个数字/字母一个input,想输入完当前的input后自动跳到下一个input,删除当前input后自动跳到前一个。
1、template代码
<div v-for="(item, index) in inputList" :key="index">
<input
type="text"
v-model="item.val"
class="inputValue"
@keyup="inputNextFocus($event, index)"
@keydown="cancelValue(index)"
/>
</div>
//注意:inputValue
2、script代码
data() {
return {
inputList: [{ val: "" }, { val: "" }, { val: "" }, { val: "" }], //根据个数
}
}
methods: {
inputNextFocus(el, index) {
var dom = document.getElementsByClassName("inputValue"), //引入inputValue
currInput = dom[index],
nextInput = dom[index + 1],
lastInput = dom[index - 1];
if (el.keyCode != 8) {
if (index < this.inputList.length - 1) {
nextInput.focus();
} else {
currInput.blur();
}
} else {
if (index != 0) {
lastInput.focus();
}
}
},
cancelValue(index) {
this.inputList[index].val = "";
}
}
以上是编程学习网小编为您介绍的“vuejs实现输入完input自动跳到下一个input”的全面内容,想了解更多关于 vuejs 内容,请继续关注编程基础学习网。
编程基础网
本文标题为:vuejs实现输入完input自动跳到下一个input
基础教程推荐
猜你喜欢
- 如何在MySQL函数中将SQL选择查询转换为格式化的HTML表 2023-10-26
- vue 鼠标移入移出(hover)切换显示图片问题 2024-01-08
- css Sub-Pixel Bug?! 2023-12-09
- javascript – 如何通过AJAX将HTML5 sqlite结果集发送到服务器 2023-10-25
- HTML汉字编码标准介绍 2022-09-21
- 反向Ajax 30分钟快速掌握 2023-01-20
- 详解CSS不定宽溢出文本适配滚动 2022-11-16
- Express的路由详解 2024-03-08
- JS+CSS实现超漂亮的动态翻书效果(思路详解) 2023-07-09
- vuejs开发的项目支持哪些浏览器 2025-01-13
