zoukankan      html  css  js  c++  java
  • 表单文本框光标自动移动到下一个文本框内

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>jstest</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <script type="text/javascript" src="base.js"></script>
    <script type="text/javascript" src="js.js"></script>
    </head>
    <body>
        
        <form id="myForm" name="yourForm">
            <input type="text" name="a1" id="a1" value="" maxlength="1" />
            <input type="text" name="a1" id="a1" value="" maxlength="3" />
            <input type="text" name="a1" id="a1" value="" maxlength="5" />
            姓名:<input type="text" name="user" value="text" /><br />
            <textarea name="content" rows="" cols="" style=" 200px;">dsfsafsdafdsafdf dsfsd</textarea>
        </form>
        
    </body>
    </html>
    //跨浏览器添加事件
    function addEvent(obj,type,fn){
        if(obj.addEventListener){
            obj.addEventListener(type,fn,false);
        }else if(obj.attachEvent){
            obj.attachEvent('on'+type,fn);
        }
    }
    
    addEvent(window,'load',function(){
        var fm = document.forms['yourForm'];
        var user = fm.elements['user'];
        var content = fm.elements['content'];
        
        addEvent(fm.elements['a1'],'keyup',tabForWard);
        addEvent(fm.elements['a2'],'keyup',tabForWard);
        addEvent(fm.elements['a3'],'keyup',tabForWard);
        
        function tabForWard(evt){
            var e = evt || window.event;
            //判断当前的长度是否和已输入的长度是否一致
            if(this.value.length == this.maxLength){
                //遍历所有控件
                for(var i = 0; i< fm.elements.length; i++){
                    if(fm.elements[i] == this){
                        fm.elements[i+1].focus();
                        return;
                    }
                }
            }
        }
        
    });
  • 相关阅读:
    转:VS2017常用快快捷键
    转:SQL Server中常用的快捷键
    转:SQL server中转换大小写快捷键
    转:left join 和 left outer join 的区别
    如何修改SVN的地址
    转 Echars地图详解
    HTML5 -- 使用css3实现简单的响应式布局
    Mac上用终端管理MySQL
    DDL 语句
    python 快速写作技巧,格式
  • 原文地址:https://www.cnblogs.com/littlefly/p/3983328.html
Copyright © 2011-2022 走看看