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实现可点击展开与关闭的左侧广告代码
Sep 02 Javascript
学习JavaScript设计模式之代理模式
Jan 12 Javascript
JavaScript中的对象和原型(一)
Aug 12 Javascript
详解AngularJS如何实现跨域请求
Aug 22 Javascript
js实现带缓动动画的导航栏效果
Jan 16 Javascript
Vue.js鼠标悬浮更换图片功能
May 17 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
Jun 12 Javascript
JS中Swiper的使用和轮播图效果
Aug 11 Javascript
浅谈vuepress 踩坑记
Apr 18 Javascript
详解Vue-Router源码分析路由实现原理
May 15 Javascript
详解iview的checkbox多选框全选时校验问题
Jun 10 Javascript
js实现简单分页导航栏效果
Jun 28 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
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
使用PHP如何实现高效安全的ftp服务器(二)
2015/12/30 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
laravel model 两表联查示例
2019/10/24 PHP
JS实现浏览器菜单命令
2006/09/05 Javascript
jquery ajax提交表单数据的两种实现方法
2010/04/29 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
JQuery操作单选按钮以及复选按钮示例
2013/09/23 Javascript
javascript中的self和this用法小结
2014/02/08 Javascript
详解vue组件通信的三种方式
2017/06/30 Javascript
基于vue实现分页效果
2017/11/06 Javascript
Vue 动态设置路由参数的案例分析
2018/04/24 Javascript
微信小程序登录时如何获取input框中的内容
2019/12/04 Javascript
Js逆向实现滑动验证码图片还原的示例代码
2020/03/10 Javascript
Python中for循环和while循环的基本使用方法
2015/08/21 Python
python制作最美应用的爬虫
2015/10/28 Python
python实现按长宽比缩放图片
2018/06/07 Python
对Python中class和instance以及self的用法详解
2019/06/26 Python
基于python-opencv3的图像显示和保存操作
2019/06/27 Python
利用python开发app实战的方法
2019/07/09 Python
基于Python实现大文件分割和命名脚本过程解析
2019/09/29 Python
python读取ini配置的类封装代码实例
2020/01/08 Python
python Django 反向访问器的外键冲突解决
2020/05/20 Python
德国箱包网上商店:koffer24.de
2016/07/27 全球购物
韩国邮政旗下生鲜食品网上超市:epost
2016/08/27 全球购物
请介绍一下WSDL的文档结构
2013/03/17 面试题
爱岗敬业演讲稿范文
2014/01/14 职场文书
留学经费担保书
2014/05/12 职场文书
公司活动总结范文
2014/07/01 职场文书
思想作风纪律整顿心得体会
2014/09/04 职场文书
"9.18"国耻日演讲稿范文
2014/09/14 职场文书
给老婆的检讨书
2015/01/27 职场文书
士兵突击观后感
2015/06/16 职场文书
团委副书记工作总结
2015/08/14 职场文书
20180830晚上第一届KSL半决赛 雨神vs解冻(二龙 三炮解说)
2022/04/01 星际争霸