javascript自动切换焦点控制效果完整实例

更新时间：2016年02月02日 11:40:58 作者：皮蛋

这篇文章主要介绍了javascript自动切换焦点控制效果的方法,结合完整实例形式分析了JavaScript响应键盘按键控制表单输入框的焦点切换功能,需要的朋友可以参考下

本文实例讲述了javascript自动切换焦点控制的方法。分享给大家供大家参考，具体如下：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html>
<head>
  <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    var EventUtil = {
      addHandler: function(element,type, handler){
        if(element.addEventListener){
          element.addEventListener(type,handler,false);
        }else if(element.attachEvent){
          element.attachEvent("on"+type,handler);
        }else{
          element["on"+type]=null;
        }
      },
      removeHandle:function(element,type,handler){
        if(element.removeEventListener){
          element.removeEventListener(type,handler,false);
        }else if(element.detachEvent){
          element.detachEvent("on"+type,handler);
        }
      },
      getEvent:function(event){
        return event ? event:window.event;
      },
      getTarget:function(event){
        return event.target || event.srcElement;
      },
      preventDefault:function(event){
        if(event.preventDefault){
          event.preventDefault();
        }else{
          event.returnValue=false;
        }
      },
      stopPropagation:function(event){
       if(event.stopPropagation){
         event.stopPropagation();
       }else{
         event.cancelBubble=true;
       }
      }
    };
    var dom_text1=document.getElementById("text1");
    var dom_text2=document.getElementById("text2");
    var dom_text3=document.getElementById("text3");
    function switchFocus(event){
      event=EventUtil.getEvent(event);
      var target=EventUtil.getTarget(event);
      if(target.value.length==target.maxLength){
        var form=target.form;
        for(var i=0;i<form.elements.length;i++){
          if(form.elements[i]==target){
            form.elements[i+1].focus();
            return;
          }
        }
      }
    }
    EventUtil.addHandler(dom_text1,"keyup",switchFocus);
    EventUtil.addHandler(dom_text2,"keyup",switchFocus);
    EventUtil.addHandler(dom_text3,"keyup",switchFocus);
  })
  </script>
</head>
<body>
  <form id="form1">
    <input type="text" maxlength="3" id="text1"/>
    <input type="text" maxlength="3" id="text2"/>
    <input type="text" maxlength="3" id="text3"/>
  </br>
  <input type="text" />
  </form>
</body>
</html>

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript动画特效与技巧汇总》、《javascript面向对象入门教程》及《JavaScript数据结构与算法技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

JS常见构造模式实例对比分析
这篇文章主要介绍了JS常见构造模式,结合实例形式对比分析了工厂模式、构造函数模式、原型模式、寄生构造函数模式、稳妥构造函数模式等相关概念、原理、实现方法与相关操作技巧,需要的朋友可以参考下
2018-08-08
Promise对象all与race方法手写示例
这篇文章主要为大家介绍了Promise对象all与race方法手写示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
微信小程序学习之数据处理详解
这篇文章主要给大家介绍了关于微信小程序中数据处理的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-07-07
js 判断上传文件大小及格式代码
用js对上传的文件大小以及格式进行初步的判断，在服务端再进行一次判断（防止浏览器拒绝执行脚本文件)下面有个不错的方法大家可以参考下
2013-11-11
js 奇葩技巧之隐藏代码
这篇文章主要介绍了js 奇葩技巧之隐藏代码,通过代码示例展示了隐藏代码的过程,需要的朋友可以参考下
2017-08-08
Javascript中定义方法的另类写法(批量定义js对象的方法)
用了很多的Javascript框架，偶尔也会去看一下框架的源码，经常会看到这样的代码。
2011-02-02
js过滤HTML标签完整实例
这篇文章主要介绍了js过滤HTML标签实现方法,以完整实例形式分析了JavaScript使用正则表达式过滤HTML标签的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-11-11
Javascript String 字符串操作包
提供一个 JS String 包，包含了一些常用的对字符串操作的函数，详细的请看源码及演示
2010-10-10
JS jQuery使用正则表达式去空字符的简单实现代码
本文给大家分享使用正则表达式去空字符的简单实现方法，需要的朋友参考下
2017-05-05
Bootstrap Table 双击、单击行获取该行及全表内容
这篇文章主要介绍了Bootstrap Table 双击、单击行获取该行内容及获取全表的内容,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-08-08