功能需求:做一个身份证后四位输入或汽车牌照输入,每个数字/字母一个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 内容,请继续关注web建站教程。
当前网址:https://ipkd.cn/webs_2177.html
workflows工作流
- 森林里一只空灵的犀鸟ComfyUI工作流
- 庭院,彩色玫瑰,云雾笼罩comfyui工作流
- 一个迷人的女人ComfyUI工作流
- 树上挂着一只快乐香蕉ComfyUI工作流一
- 一桌精致的美食,桌上几杯白葡萄酒
- 一朵染血的白玫瑰ComfyUI工作流
- 1个粉红色头发可爱的女孩ComfyUI工作流
- 一幅骨架坐在公园的长椅上
猜你喜欢
声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!