<!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. IEEE参考文献格式

    IEEE参考文献格式 由于国外期刊参考文献与国内参考文献的格式有很大区别,其中最常用的参考文献为会议论文.书籍.期刊文献,所以特别在此记录说明,方便以后使用. 会议论文(Published Confe ...

  2. qt搭建环境

    1 用viewteam实现远程控制电脑.可以在家里继续操作办公电脑了. http://blog.csdn.net/sch0120/article/details/38324599 2qt环境安装.今天 ...

  3. Activity之间数据传递（一）（简单传递，数据包Bundle，传递对象）

    一,简单传递(简单的字符串) 第一个activity通过putExtra()将字符串传入i protected void onCreate(Bundle savedInstanceState) { s ...

  4. UE4 - C++ 射线捕捉

    #include "Runtime/Engine/Classes/Kismet/KismetMathLibrary.h" //省略大部分代码 void AMyFPS_Charact ...

  5. 网页设计、java、Andorid资源清单整理

    多学多练做笔记很重要. 赤裸裸的干货非鸡汤 网页设计的主要技术:    Html,    Js,    Css,    Ps       HTML/HTML5     网页的基础Html必须知道的.但 ...

  6. 一些常用的vim设置

    以下内容皆来源于网络,感谢原作者.如果引用出处错误,请告知以便修改. 1. vim的几种模式和按键映射 转载自:[1] Map是Vim强大的一个重要原因,可以自定义各种快捷键,用起来自然得心应手.vi ...

  7. asp.net与asp.net 优缺点

    Asp.net Mvc架构模式是一种 低耦合.可测试的web应用程序框架,它是基于CLR和成熟的MVC架构构建的.ASP.NET MVC不支持ViewState和服务器控件. Asp.net优点: 1 ...

  8. Android 学习第3课，小例子

    package temperature.convert; import java.util.Scanner; public class Converter { public static void m ...

  9. frame和bounds区别

    学习ios开发有一段时间了,项目也做了两个了,今天看视频,突然发现view的frame和bound两个属性,发现bound怎么也想不明白,好像饶你了死胡同里,经过一番尝试和思考,终于弄明白bound的 ...

  10. ups机制下停电提前关闭oracle数据库

    思路:在一个受ups保护的机器A1上写脚本,几分钟(如半分钟)ping不在ups保护的机器B,如果几次(如5次)ping不同,这时我们认为将要停电,此时脚本执行正常关闭受ups保护的机器上数据库的命令 ...