<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test javascript</title>
    <script type="text/javascript">
        window.onload = function() {
            var EventUtil = {
                addhandler:function(element,type,handler) {
                    if(element.addEventListenter) {
                        element.addEventListenter(type,handler,false);
                    } else if (element.attachEvent) {
                        element.attachEvent("on"+type,handler);
                    } else {
                        element["on"+type] = handler;
                    }
                },

                getEvent:function(event) {
                    return event?event:window.event;
                },

                getTarget:function() {
                    return event.target || event.srcElement;
                },

                preventDefault:function() {
                    if(event.preventDefault) {
                        event.preventDefault();
                    } else {
                        event.returnValue = false;
                    }
                },

                stopPropagation:function() {
                    if(event.stopPropagation) {
                        event.stopPropagation();
                    } else {
                        event.cancelBuddle = true;
                    }
                },

                removehandler:function(element,type,handler) {
                    if(element.removeEventListenter) {
                        element.addEventListenter(type,handler,false);
                    } else if (element.detachEvent) {
                        element.detachEvent("on"+type,handler);
                    } else {
                        element["on"+type] = null;
                    }
                },

                getCharCode: function(event) {
                    if(typeof event.charCode == "number") {
                        return event.charCode;
                    } else {
                        return event.keyCode;
                    }
                },

                getClipboardText: function(event) {
                    var clipboardData = event.clipboardData || window.clipboardData;
                    return clipboardData.getData("text");
                },

                setClipboardText: function(event,value) {
                    if(event.clipboardData) {
                        return event.clipboardData.setData("text/plain",value);
                    } else if(window.clipboardData){
                        return window.clipboardData.setData("text",value);
                    }
                }

            }

            var textarea = document.forms[0].elements["text"];
            var button = document.getElementById("button");

            (function() {
                function tabForward(event) {
                    event = EventUtil.getEvent(event);
                    var target = EventUtil.getTarget(event);

                    if(target.value.length == target.maxLength) {
                        var form = target.parentElement;

                        for(var i=0,len = form.elements.length;i<len-1;i++) {
                            if(form.elements[i] == target) {
                                form.elements[i+1].focus();
                                return ;
                            }
                        }
                    }

                }

                var textTel1 = document.getElementById("txtTel1");
                var textTel2 = document.getElementById("txtTel2");
                var textTel3 = document.getElementById("txtTel3");
                var textTel4 = document.getElementById("txtTel4");

                EventUtil.addhandler(textTel1,"keyup",tabForward);
                EventUtil.addhandler(textTel2,"keyup",tabForward);
                EventUtil.addhandler(textTel3,"keyup",tabForward);
                EventUtil.addhandler(textTel4,"keyup",tabForward);

            })();
        }
    </script>
</head>
<body>
<form>
    <input type="text" name="tel1" id="txtTel1" maxlength="3" />
    <input type="text" name="tel2" id="txtTel2" maxlength="3" />
    <input type="text" name="tel3" id="txtTel3" maxlength="3" />
    <input type="text" name="tel4" id="txtTel4" maxlength="3" />
</form>
</body>
</html>

input自动获取焦点的更多相关文章

  1. element el-input 自动获取焦点和IE下光标位置解决方法

    在实际开发中我们经常会碰到这样的场景,就是有input的地方都喜欢切换过去input自动获取焦点. 如果这个问题是在input中,很容易就实现了,但是element里面的el-input看源码,其实不 ...

  2. vue动态设置Iview的多个Input组件自动获取焦点

    1.html,通过ref=replyBox设置焦点元素,以便后续获取 // 动态设定自动获取焦点按钮 <p class="text-right text-blue fts14 ptb1 ...

  3. 鼠标经过INPUT时自动获取焦点

    鼠标经过INPUT时自动获取焦点 <input type="text" name="addr" onMouseOver="this.focus( ...

  4. jquery--blur()事件，在页面加载时自动获取焦点

    jquery--blur()事件会在页面加载时自动获取焦点,应将onblur写到html标签中 <div class="inputbox"> <input typ ...

  5. 【小程序】bindconfirm点击小键盘触发事件、focus自动获取焦点

    最近在写小程序,项目要求写一个搜索框,在进入页面时就触发input的事件,调出键盘,点小键上的搜索按钮 就触发搜索事件,分享一下. bindconfirm 是点击小键盘上的搜索按钮就触发要执行的方法 ...

  6. 页面一刷新让文本框自动获取焦点-- 和自定义v-focus指令

    <body> <div id="app"> <input type="text" value="" id=&q ...

  7. Vue--由自动获取焦点引出的DOM、mounted、自定义指令

    一.自动获取焦点的DOM实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  8. 让EditText不能自动获取焦点

    在activity中放置了1个或1个以上的EditText,进入该activity的时候第一个EditText会接收焦点,我希望里面所有的EditText默认是不接收焦点的,该怎么做呢? 方法: 在第 ...

  9. 安卓应用开发用户体验之禁止EditText自动获取焦点

    一.问题描述: 在安卓应用开发时,经常会在同一个页面有许多不同的控件,在用户操作时,如何正确的在这些控件之间来回切换是良好用户体验的重要问题.可能会碰到如下问题:在点击页面内某控件时(假设控件为Spi ...

随机推荐

  1. Python的平凡之路（7）

    一.面向对象高级语法部分   1.静态方法.类方法.属性方法                                                                       ...

  2. rails常用验证方法 （转）

    validates_presence_of       :login,  :message => "用户名不能为空!" validates_length_of         ...

  3. [深入Python]Python的私有变量

    Python没有真正的私有变量.内部实现上,是将私有变量进程了转化,规则是:_<类名><私有变量> 下面的小技巧可以获取私有变量: class Test(object): de ...

  4. Cordova android框架详解

    一.Cordova 核心java类说明 CordovaActivity:Cordova Activity入口,已实现PluginManager.WebView的相关初始化工作, 只需继承Cordova ...

  5. ubuntu14.04 键盘错位小问题

    分享一个ubuntu14.04里的小问题,不知道有没有人跟我一样悲催 问题: 键盘错位了,@和"两个符合正好颠倒,~#这几个也错乱了,~符号跑到了|上,#跑到了shift+|上,这个问题在敲 ...

  6. JM8.6学习

    1. vs2010 设置参数 编译运行JM8.6 (参考http://bbs.chinavideo.org/forum.php?mod=viewthread&tid=15695&hig ...

  7. easyUI笔记09.03

    layout的布局可以自适应 <body class="easyui-layout"> <div data-options="region:'north ...

  8. 浅谈new operator、operator new和placement new 分类： C/C++ 2015-05-05 00:19 41人阅读 评论(0) 收藏

    浅谈new operator.operator new和placement new C++中使用new来产生一个存在于heap(堆)上对象时,实际上是调用了operator new函数和placeme ...

  9. （转）几种范数的解释 l0-Norm, l1-Norm, l2-Norm, … , l-infinity Norm

    几种范数的解释 l0-Norm, l1-Norm, l2-Norm, - , l-infinity Norm from Rorasa's blog l0-Norm, l1-Norm, l2-Norm, ...

  10. 认识CPU Cache

    http://geek.csdn.net/news/detail/114619 7个示例科普CPU Cache:http://coolshell.cn/articles/10249.html Linu ...