js 光标从一个框输入完之后自动跳到另一个框

最新推荐文章于 2021-12-03 22:59:46 发布

微辣米粉

最新推荐文章于 2021-12-03 22:59:46 发布

阅读量7.7k

点赞数 2

分类专栏：前端 js 文章标签： js keyup focus html 光标

本文链接：https://blog.csdn.net/tuntun1120/article/details/76143909

版权

前端同时被 2 个专栏收录

26 篇文章 1 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

思路就是获取第一个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>