文本框组——自动切换焦点——例如加区号和分机号的电话号码文本框组 P426

2020-07-26 15:35:04 阅读：196 来源： 互联网

标签：elements target form P426 分机号文本框 var event EventUtil

注：此例只适用于文本框组，没有考虑隐藏字段<input type="hidden" />。

<!DOCTYPE html>
<html>
    <head>
        <title>Textbox Tab Forward Example</title>
        <script type="text/javascript" src="EventUtil.js"></script>
    </head>
    <body>
        <form method="post" action="http://www.nczonline.net">
            <p>Enter your telephone number:</p>
            <input type="text" name="tel1" id="txtTel1" size="3" maxlength="3" >
            <input type="text" name="tel2" id="txtTel2" size="3" maxlength="3" >
            <input type="text" name="tel3" id="txtTel3" size="4" maxlength="4" >

            <input type="submit" value="Submit">
        </form>
        <script type="text/javascript">
        (function(){
       
            function tabForward(event){            
                event = EventUtil.getEvent(event);
                var target = EventUtil.getTarget(event);
                
                if (target.value.length == target.maxLength){
                    var form = target.form;
                    
                    for (var i=0, len=form.elements.length; i < len; i++) {
                        if (form.elements[i] == target) {
                            if (form.elements[i+1]){
                                form.elements[i+1].focus();
                            }
                            return;
                        }
                    }
                }
            }
                        
            var textbox1 = document.getElementById("txtTel1"),
                textbox2 = document.getElementById("txtTel2"),
                textbox3 = document.getElementById("txtTel3");
            
            EventUtil.addHandler(textbox1, "keyup", tabForward);        
            EventUtil.addHandler(textbox2, "keyup", tabForward);        
            EventUtil.addHandler(textbox3, "keyup", tabForward);        
                
        })();
        </script>
    </body>
</html>

标签：elements,target,form,P426,分机号,文本框,var,event,EventUtil
来源： https://www.cnblogs.com/jiunie/p/13380521.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

文本框组——自动切换焦点——例如加区号和分机号的电话号码文本框组 P426