功能需求:做一个身份证后四位输入或汽车牌照输入,每个数字/字母一个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工作流
猜你喜欢
声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!

日历设置每个月颜色都不一样
css3动画loading效果
纯css3绘制的小鸟
css3搭积木叠加图形
数字滚动效果(兼容IE6/IE8)
jquery鼠标滑过图片边框特效(jquery.focus-follow插件)
js导出excel插件(兼容mac电脑Numbers表格)
css3实现星球旋转










