js获取inpu焦点,输入完1位数字后自动跳到第二个光标
html代码块
<div class="mui-row" id="inputs">
<input class="mui-numbox-input" type="number" onKeyUp="if(this.value.length>1){this.value=this.value.substr(0,1)};this.value=this.value.replace(/[^\d]/g,'');"/>
<input class="mui-numbox-input" type="number" onKeyUp="if(this.value.length>1){this.value=this.value.substr(0,1)};this.value=this.value.replace(/[^\d]/g,'');"/>
<input class="mui-numbox-input" type="number" onKeyUp="if(this.value.length>1){this.value=this.value.substr(0,1)};this.value=this.value.replace(/[^\d]/g,'');"/>
<input class="mui-numbox-input" type="number" onKeyUp="if(this.value.length>1){this.value=this.value.substr(0,1)};this.value=this.value.replace(/[^\d]/g,'');"/>
<input class="mui-numbox-input" type="number" onKeyUp="if(this.value.length>1){this.value=this.value.substr(0,1)};this.value=this.value.replace(/[^\d]/g,'');"/>
<input class="mui-numbox-input" type="number" onKeyUp="if(this.value.length>1){this.value=this.value.substr(0,1)};this.value=this.value.replace(/[^\d]/g,'');"/>
</div>
css
#inputs{
overflow:hidden;
}
#inputs input{
width:14%;
float:left;
padding:10px 13px;
text-align: center;
border: 1px solid #fe8c10;
color: #fe8c10;
margin:0 1%;
}
js代码
光标自动跳到下一个input
onload = function(){
var inputs=document.getElementById('inputs');
var txts = inputs.getElementsByTagName("input");
for(var i = 0; i<txts.length;i++){
var t = txts[i];
t.index = i;
t.setAttribute("readonly", true);
t.onkeyup=function(){
this.value=this.value.replace(/^(.).*$/,'$1');
var next = this.index + 1;
if(next > txts.length - 1) return;
txts[next].removeAttribute("readonly");
txts[next].focus();
}
}
txts[0].removeAttribute("readonly");
}