<!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. jquery Mobile弹出窗

    先创建一个窗体 <div data-role="popup" id="popupView" class="ui-content" da ...

  2. Photo Kit 框架

    http://geek.csdn.net/news/detail/56031 http://www.jianshu.com/p/9988303b2429 http://blog.sina.com.cn ...

  3. 当一个activity中按钮过多时怎么办？

    这几天看极客学院的视频,跟视频中的老师学到的一些小技巧~~ .setOnClickListener(this) 通过重写this(我猜的是重写),下面有onClicked() package exam ...

  4. HTML编码规则、CSS属性声明顺序--简介

    From AmazeUI:http://amazeui.org/getting-started/html-css-guide HTML 属性顺序 HTML 属性应当按照以下给出的顺序依次排列,确保代码 ...

  5. Gym 100960G （set+树状数组）

    Problem Youngling Tournament 题目大意 给一个序列a[i],每次操作可以更改一个数,每次询问 将序列排序后有多少个数a[i]>=sum[i-1]. n<=10^ ...

  6. .NET 强引用和弱引用

    一:什么是弱引用 了解弱引用之前,先了解一下什么是强引用 例如 : Object obj=new Object();     就是一个强引用,内存分配一份空间给用以存储Object数据,这块内存有一个 ...

  7. Day19_IO第一天

    1.异常 1.概念      程序出现不正常的情况 2.异常体系(掌握)      Throwable           |-Error                               ...

  8. Java初学者入门应该掌握的30个概念

    1.OOP中唯一关系的是对象的接口是什么,就像计算机的销售商她不管电源内部结构 是怎样的,他只关系能否给你提供电就行了,也就是只要知道can or not而不是how and why.所有的程序是由一 ...

  9. 关于char类型的连续输入

    这个忘了好久了 先回想吧 一 单字符 ①  char m; scanf("%d",&m); ② char m; m=getchar(); putchar(m); 二 字符数 ...

  10. Alpha版本项目展示

    成员简介 谷大鑫: 热爱编程,技术狂魔,可以对感兴趣的技术钻研到茶饭不思,队伍的技术中坚.标签:整个队伍里最靠谱的人. 个人博客:http://www.cnblogs.com/nrm1/ 杨金键: 未 ...