当用户在表单中填写完当前字段后，能否自动将焦点跳转到下一个字段以方便用户输入？

　　为了增强易用性，加快数据输入的速度，可以在前一个文本框中的字符达到一定的设置的字符长度后（比如电话号码，身份证号等），用户输入完后，自动将焦点切换到下一个文本框中。可以使用JS来实现这一功能。

　　思路：首先，比较用户输入的值和文本框中的maxlength特性，确定是否达到了指定的长度(或者允许输入的最大长度)，如果这两个值相等，就去查找表单字段的集合，找到下一个文本框，将焦点切换到该文本框中。

代码：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>JS自动切换焦点</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;

             }

         },

         /*

         该方法返回Event对象的引用，考虑到IE中对事件的位置的不同，可以使用这个方法取得Event对象。

         */

         getEvent: function(event){

             return event ? event: window.event;

         },

         //返回事件的目标

         getTarget: function(){

             return event.target || event.srcElement;

         },

         /*通过比较用户输入的值与文本框的maxlength特性，确定是否达到最大长度

         当两个值相等时，则需要查找表单字段的集合，查找到下一个文本框后将焦点切换

         */

         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;

             }

         },

         //处理字符编码

     }

     var textarea = document.forms[0].elements["text"];

     var button = document.getElementById("button");

     (function(){

         function tabForward(event){     //event事件对象传到事件处理程序中去

             event = EventUtil.getEvent(event);    //把event传给getEvent()方法

             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 textName = document.getElementById("textName");

         var textTel = document.getElementById("textTel");

         var textID = document.getElementById("textID");

         EventUtil.addhandler(textName,"keyup",tabForward);   //在用户输入新字符后触发keyup事件

         EventUtil.addhandler(textTel,"keyup",tabForward);

         EventUtil.addhandler(textID,"keyup",tabForward);

     })();

 }

 </script>

 </head>

 <body>

     <form>

         <input type="text" name="Name" id="textName" maxlength="5" placeholder="您的姓名"/>

         <input type="text" name="Tel" id="textTel" maxlength="11" placeholder="您的电话号码"/>

         <input type="text" name="ID" id="textID" maxlength="5" placeholder="您的ID"/>

     </form>

 </body>

 </html>

对于这段代码中32到55行的作用，不懂，请看懂的人解释一下，thanks!

参考自：javascript高级程序设计。

　　

javascript实现自动切换焦点功能学习的更多相关文章

  1. Javascript中自动切换焦点

      <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title&g ...

  2. js进阶 9-9 html控件如何实现回车键切换焦点

    js进阶 9-9 html控件如何实现回车键切换焦点 一.总结 一句话总结:在onkeydown事件中判断event对象的键位码,然后focus事件. 二.js进阶 9-9 html控件如何实现回车键 ...

  3. 获取bing.com的图片并在gnome3中设置自动切换

    发现 bing.com 上的图片很好看,因此打算每天把 bing.com 的图片下载下来,用作桌面. 需要做的是两个部分,爬取图片到目录和设置目录图片为桌面背景并可以自动切换. 第一部分,下载图片,使 ...

  4. html+css+jQuery+JavaScript实现tab自动切换功能

    tab1.html内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  5. JavaScript实现回车键切换输入框焦点

    用JavaScript实现回车键切换输入框焦点的功能,不是回车换行哦,在Textarea中,回车换行是默认功能,不过若要在textarea中使用 回车切换输入框焦点功能的话,回车换行就要失效了,不过i ...

  6. tabs自动切换功能的实现

    <html><head><!-- Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href= ...

  7. 【温故而知新-Javascript】图片效果（图像震动效果、闪烁效果、自动切换图像）

    1.当鼠标指针经过图像时图像震动效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  8. jquery input切换编辑和不可编辑模式,input自动获得焦点，遍历所有的子类标签

    input切换编辑和不可编辑模式 在项目中我们经常会用到这样的效果,点击一下不可编辑的input 标签,变成可编辑的input标签.用法如下 <input type="text&quo ...

  9. javascript 实现类似百度联想输入，自动补全功能

    js  实现类似百度联想输入,自动补全功能 方案一: search是搜索框id="search" //点击页面隐藏自动补全提示框 document.onclick = functi ...

随机推荐

  1. Oracle oerr工具介绍

    (1)什么是oerr oerr是Oracle提供的在UNIX/Linux上查看Oracle错误的小工具,使用起来非常方便. (2)如何使用 oerr工具位于ORACLE_HOME下面,可以使用whic ...

  2. 【转】RMAN删除过期备份或非过期备份

    (一)删除备份--DELETE命令用于删除RMAN备份记录及相应的物理文件.当使用RMAN执行备份操作时,会在RMAN资料库(RMAN Repository)中生成RMAN备份记录,默认情况下RMAN ...

  3. 【SQL】Oracle和Mysql的分页、重复数据查询(limit、rownum、rowid)

    上周三面试题有两道涉及Oracle的分页查询,没有意外地凉了,现在总结一下. · Mysql mysql的分页可以直接使用关键字limit,句子写起来比较方便. 语法: ① limit m,n -- ...

  4. oracle-sql脚本导出EXCEL数据

    在数据库中,经常有业务人员提出需求导出数据库中的业务数据,而且是每天.每周或每月定时导出.为了方便,可将sql查询的脚本 通过下面脚本来导出EXCEL数据. 1.将查询sql脚本(AAA.sql)放到 ...

  5. 数论(一)LOJ1282

    1.题目来源LOJ1282 You are given two integers: n and k, your task is to find the most significant three d ...

  6. sax技术解析xml下jaxp解析器详细代码

    *解析xml的两种技术dom和sax dom:根据xml的层级结构在内存中分配一个树形结构,把xml标签,属性,文本封装成对象. sax方式:事件驱动,边读边解析. 在javax.xml.parser ...

  7. YII2.0学习一 Advanced 模板安装

    下载github上的完事安装包(本机环境使用Composer安装非常慢) https://github.com/yiisoft/yii2-app-advanced 解压到文件目录 wwwroot/sh ...

  8. CacheManager源码分析

    计算rdd的某个分区是从RDD的iterator()方法开始的,我们从这个方法进入 然后我们进入getOrCompute()方法中看看是如何进行读取数据或计算的 getOrElseUpdate()方方 ...

  9. Python学习手册之数据类型

    在上一篇文章中,我们介绍了 Python 的异常和文件,现在我们介绍 Python 中的数据类型. 查看上一篇文章请点击:https://www.cnblogs.com/dustman/p/99799 ...

  10. Java学习笔记六:Java的流程控制语句之if语句

    Java的流程控制语句之if语句 一:Java条件语句之if: 我们经常需要先做判断,然后才决定是否要做某件事情.例如,如果考试成绩大于 90 分,则奖励一朵小红花 .对于这种“需要先判断条件,条件满 ...