1、创建一个form表单
<form name=card action="" method=post>
<input onkeydown="T1_onkeyup()" maxLength=1 name=T1>
<input onkeydown="T2_onkeyup()" maxLength=1 name=T2>
<input onkeydown="T3_onkeyup()" maxLength=1 name=T3>
<input onkeydown="T4_onkeyup()" maxLength=1 name=T4>
</form>
onkeydown:键盘按下事件
maxLength:input最大输入位数
可以添加type属性用来限制只输入数字,属性值为tel
2、引入jquery文件
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
3、编写js代码
<script>
function T1_onkeyup() {
if(document.card.T1.value.length==1){
document.card.T2.focus();
}
}
function T2_onkeyup() {
var oEvent = window.event;
if (oEvent.keyCode == 8 && document.card.T2.value.length==0) {
document.card.T1.focus();
}
if(document.card.T2.value.length==1){
document.card.T3.focus();
}
}
function T3_onkeyup() {
var oEvent = window.event;
if (oEvent.keyCode == 8 && document.card.T3.value.length==0) {
document.card.T2.focus();
}
if(document.card.T3.value.length==1){
document.card.T4.focus();
}
}
function T4_onkeyup() {
var oEvent = window.event;
if (oEvent.keyCode == 8 && document.card.T4.value.length==0) {
document.card.T3.focus();
}
}
</script>
oEvent.keyCode == 8 :获取按下的键值为8(删除键)时回退上一个input框