<!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. Xcode5 取消ARC

    终于开心的装上Xcode5,主管马上发布新的任务,开始新的项目,各种开心,终于可以换个界面看看了. 可是谁知第一步创建项目就开始悲剧了,居然没有地方可以选择非ARC了,真是肿么个情况呀,查了一下,万能 ...

  2. Ionic 2.0.0-rc.1 发布，HTML5 移动应用框架

    Ionic 2.0.0-rc.1 发布了,Ionic Framework 是个高级的 HTML5 移动端应用框架,是个很漂亮的使用 HTML5 开发混合移动应用前端框架.本次更新内容如下: Bug 修 ...

  3. HDU 4576 简单概率 + 滚动数组DP（大坑）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4576 坑大发了,居然加 % 也会超时: #include <cstdio> #includ ...

  4. .使用 HTML+CSS 实现如图布局，border-widht 5px，一个格子大小是 50*50，hover时候边框变为红色（兼容IE6+，考虑语义化的结构）

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  5. ✡ leetcode 165. Compare Version Numbers 比较两个字符串数字的大小 --------- java

    Compare two version numbers version1 and version2.If version1 > version2 return 1, if version1 &l ...

  6. Latex转换之PDF

    近期一直在做如何使用latex将模板转换成PDF.现在写下在项目中如何实现. 1.首先你先进官网下载http://www.miktex.org/download.我用的是如下图所示. 在下载好的Mik ...

  7. html5-websocket初探

    HTML5规范在传统的web交互基础上为我们带来了众多的新特性,随着web技术被广泛用于web APP的开发,这些新特性得以推广和使用,而websocket作为一种新的web通信技术具有巨大意义. 什 ...

  8. web项目引用Java项目，连接报错error HTTP Status 500 - Servlet execution threw an exception

    错误信息 项目背景: 一个web项目引用一个java Project,项目中添加了引用,但是打开页面访问,总报500错误.提示:servlet初始化错误. 环境:Eclipse luna JDK: 1 ...

  9. 【转载-好文】使用 Spring 2.5 注释驱动的 IoC 功能

    在 IBM Bluemix 云平台上开发并部署您的下一个应用. 开始您的试用 原文链接:https://www.ibm.com/developerworks/cn/java/j-lo-spring25 ...

  10. Spring Boot构建RESTful API与单元测试

    如果您对Spring MVC不熟悉并且还没有尝试过快速入门案例,建议先看一下相关的内容. @Controller:修饰class,用来创建处理http请求的对象 @RestController:Spr ...