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


Posted in Javascript onFebruary 02, 2016

本文实例讲述了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 相关文章推荐
js实现鼠标感应向下滑动隐藏菜单的方法
Feb 20 Javascript
JS实现为表格动态添加标题的方法
Mar 31 Javascript
在JavaScript中处理字符串之link()方法的使用
Jun 08 Javascript
JavaScript基于原型链的继承
Jun 22 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
Feb 10 Javascript
js实现水平滚动菜单导航
Jul 21 Javascript
使用yeoman构建angular应用的方法
Aug 14 Javascript
vue keep-alive请求数据的方法示例
May 16 Javascript
vue2.0 + ele的循环表单及验证字段方法
Sep 18 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
Sep 19 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
Jan 12 Javascript
支付宝小程序实现省市区三级联动
Jun 21 Javascript
原生js实现图片层叠轮播切换效果
Feb 02 #Javascript
Javascript实现的SHA-256加密算法完整实例
Feb 02 #Javascript
JavaScript实现的SHA-1加密算法完整实例
Feb 02 #Javascript
javascript实现瀑布流加载图片原理
Feb 02 #Javascript
基于JQuery实现图片轮播效果(焦点图)
Feb 02 #Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 #Javascript
JavaScript实现的MD5算法完整实例
Feb 02 #Javascript
You might like
PHP Global定义全局变量使用说明
2013/08/15 PHP
PHP中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
PHP中定义数组常量(array常量)的方法
2014/11/17 PHP
php通过记录IP来防止表单重复提交方法分析
2014/12/16 PHP
学习php设计模式 php实现备忘录模式(Memento)
2015/12/09 PHP
laravel通过创建自定义artisan make命令来新建类文件详解
2017/08/17 PHP
Laravel配合jwt使用的方法实例
2020/10/25 PHP
JQuery跨Iframe选择实现代码
2010/08/19 Javascript
js 左右悬浮对联广告代码示例
2014/12/12 Javascript
javascript相关事件的几个概念
2015/05/21 Javascript
js调用webservice构造SOAP进行身份验证
2016/04/27 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
2016/12/26 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
2017/01/18 Javascript
详解vue嵌套路由-params传递参数
2017/05/23 Javascript
JS闭包的几种常见形式实例详解
2017/09/16 Javascript
ES6 javascript中class类的get与set用法实例分析
2017/10/30 Javascript
详解小程序原生使用ES7 async/await语法
2018/08/06 Javascript
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
JavaScript之解构赋值的理解
2019/01/30 Javascript
浅谈JS中几种轻松处理'this'指向方式
2019/09/16 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
2020/04/22 Javascript
[01:06]DOTA2亚洲邀请赛专属珍藏-荧煌之礼
2017/03/24 DOTA
Python中的数据对象持久化存储模块pickle的使用示例
2016/03/03 Python
python select.select模块通信全过程解析
2017/09/20 Python
python中字符串内置函数的用法总结
2018/09/13 Python
Python序列类型的打包和解包实例
2019/12/21 Python
对tensorflow 中tile函数的使用详解
2020/02/07 Python
python多线程实现同时执行两个while循环的操作
2020/05/02 Python
python+selenium自动化实战携带cookies模拟登陆微博
2021/01/19 Python
日本必酷网络直营店:Biccamera
2019/03/23 全球购物
网络维护管理员的自我评价分享
2013/11/11 职场文书
大学生毕业自我鉴定范文
2014/02/03 职场文书
《鞋匠的儿子》教学反思
2014/03/02 职场文书
比赛口号大全
2014/06/10 职场文书
欠款起诉书范文
2015/05/19 职场文书
Java实现给Word文件添加文字水印
2022/02/15 Java/Android