功能需求:做一个身份证后四位输入或汽车牌照输入,每个数字/字母一个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
基础教程推荐
猜你喜欢
- 浅谈CSS中浮动float带来的高度塌陷问题及4种解决方案 2023-12-20
- JavaScript实现网页计算器功能 2024-01-06
- 【Azure 应用服务】部署Azure Web App时,是否可以替换hostingstart.html文件呢? 2023-10-29
- CSS 完美兼容IE6/IE7/FF的通用hack方法 2023-12-20
- CSS3常见动画的实现方式 2024-03-11
- uni-app设置是否保持常亮状态,离开小程序后设置失效 2023-08-29
- vue中引入绝对路径报错是什么原因?(解决方法) 2025-01-17
- laydate时间插件获取时间范围 2024-12-08
- vue-axios interceptors(拦截器)方法介绍 2025-01-20
- Javascript运行机制之Event Loop 2023-08-08