js 游標從一個框輸入完之後自動跳到另一個框
阿新 • • 發佈：2019-02-09
思路就是獲取第一個input框，然後keyup方法，然後觸發事件，然後移動到後面那個inout框，執行focus()
有的寫的是onkeyup="..." 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.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"); } </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>