使用Js进行验证码输入自动跳格
HTML部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/index.css" />
<script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<div>
<input type="text" maxlength="1" class="inputNumber" />
<input type="text" maxlength="1" class="inputNumber" />
<input type="text" maxlength="1" class="inputNumber" />
<input type="text" maxlength="1" class="inputNumber" />
</div>
<script src="js/index.js"></script>
</body>
</html>
Js部分：
$(function(){
let inputNumber = $(".inputNumber");
inputNumber.focus(function(event){
inputNumber.keyup(function(event){
// console.log(event.which);
switch(event.which){
case 39:
console.log("向右");
$(this).next().focus();
break;
case 37:
console.log("向左");
$(this).prev().focus();
break;
case 8:
console.log("删除");
$(this).prev().focus();
break;
default:
let valueNumber = $(this).val();
if(valueNumber === "" || valueNumber == null){
return false;
}
if(!isNaN(valueNumber)){
$(this).next().focus();
}else{
alert("不是数字");
$(this).val("");
}
}
})
})
})
这里CSS代码没有贴，需要的自己搞一下就行。
原理：
当input输入框获得焦点，且键盘按键抬起时，触发方法，主要是获得：向左按键、向右按键、backspace按键、数字按键。
这个过程中改变获取输入框焦点。