应用场景:一般使用在输入生日、银行卡信息等场景。
效果图:
html:
<input
type="text"
placeholder="1980"
@keyup="nextinput" //键盘输入弹起触发事件
@keyup.delete="backspace" //删除触发事件
maxlength="4"
v-model="userinfo.birthday.year"
class="year"
ref="year"
/><span>年</span
><input
type="text"
placeholder="01"
@keyup="nextinput"
@keyup.delete="backspace"
maxlength="2"
v-model="userinfo.birthday.month"
class="month"
ref="month"
/><span>月</span
><input
type="text"
placeholder="02"
@keyup="nextinput"
@keyup.delete="backspace"
maxlength="2"
v-model="userinfo.birthday.day"
class="day"
ref="day"
/><span>日</span>
js:
nextinput(e) {
if (e.target.value.length == 4) { //年份输入框若输满4个数字
if (e.target.className == "year") {
this.$refs.month.focus(); //月输入框获取焦点
}
} else if (e.target.value.length == 2) { //月份输入框若输满2个数字
if (e.target.className == "month") {
this.$refs.day.focus(); //日输入框获取焦点
}
}
},
backspace(e) {
if (e.target.value == "") {
if (e.target.className == "month") {
this.$refs.year.focus();
} else if (e.target.className == "day") {
this.$refs.month.focus();
}
}
},