思路就是获取第一个input框,然后keyup方法,然后触发事件,然后移动到后面那个inout框,执行focus()
有的写的是οnkeyup="..." onfocus() 大家自己看那个有效就用那个吧~
1.只靠id完成(死方法),多个框要写多遍
<html>
<head>
<title>js24.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 输入完毕之后光标自动移动到下一个框的方法 -->
</head>
<body onload = "document.forms[0].elements[0].focus();">
<form>
<input type = "text" size = 3 maxlength=1 id="field001">
<input type = "text" size = 3 maxlength=1 id="field002">
<input type = "text" size = 3 maxlength=1 id="field003">
<input type = "text" size = 3 maxlength=1 id="field004">
</form>
</body>
<script type="text/javascript">
function moveNextId(){
if(input_001.value.length == 1){
debugger;
document.getElementById('field002').focus();
}
}
var input_001 = document.getElementById('field001');
alert(input_001);
input_001.addEventListener("keyup",moveNextId,false);
</script>
</html>
2.其他网友的循环法则
网友1:
https://zhidao.baidu.com/question/746434167568310172.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
RunJS 演示代码
</title>
<style>
*{
margin:0;
padding:0;
}
#wrap {
margin:auto;
width: 300px;
}
#wrap input[type=text]{
width:30px;
height:20px;
float:left;
text-align:center;
}
</style>
<script>
onload = function(){
var txts = wrap.getElementsByTagName("input");
for(var i = 0; i<txts.length;i++){
var t = txts[i];
t.index = i;
t.setAttribute("readonly", true);
t.οnkeyup=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");
}
</script>
</head>
<body>
<div id="wrap">
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
</div>
</body>
</html>
网友2:
http://blog.csdn.net/csdt_csdt/article/details/11678105
<!DOCTYPE html>
<html>
<head>
<title>js24.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- 输入完毕之后光标自动移动到下一个框的方法 -->
<script type="text/javascript">
function moveNext(object,index){
if(object.value.length == 4){
document.forms[0].elements[index+1].focus();
}
}
function showResult(){
var f = document.forms[0];
var result="";
for(var i = 0; i<4 ;i++){
result += f.elements[i].value;
}
alert(result);
}
</script>
</head>
<body onload = "document.forms[0].elements[0].focus();">
<form>
<input type = "text" size = 3 maxlength=4 onkeyup = "moveNext(this,0);">-
<input type = "text" size = 3 maxlength=4 onkeyup = "moveNext(this,1);">-
<input type = "text" size = 3 maxlength=4 onkeyup = "moveNext(this,2);">-
<input type = "text" size = 3 maxlength=4 onkeyup = "moveNext(this,3);"><br>
<input type = "button" value = "显示所有" onclick = "showResult();">
</form>
</body>
</html>