当达到输入长度时表单自动切换焦点


Posted in Javascript onApril 06, 2014

当达到输入长度时表单自动切换焦点
有时候会遇到和上面类似的表单字段。我们可以给每个字段限制输入长度,当达到输入长度时自动切换焦点,以增强表单的易用性

<form id="myForm"> 
<input type="text" name="tel1" id="txt1" maxlength="3">- 
<input type="text" name="tel2" id="txt2" maxlength="3">- 
<input type="text" name="tel3" id="txt3" maxlength="4"> 
<br> 
<input type="submit" value="Submit"> 
</form>

(function () { 
function tabForward(e) { 
e = e || window.event; 
var target = e.target || e.srcElement; if (target.value.length === target.maxLength) { 
var form = target.form; 
for (var i = 0, len = form.elements.length; i < len; i++) { 
if (form.elements[i] === target) { 
if (form.elements[i++]) { 
form.elements[i++].focus(); 
} 
break; 
} 
} 
} 
} 
var textbox1 = document.getElementById("txt1"); 
var textbox2 = document.getElementById("txt2"); 
var textbox3 = document.getElementById("txt3"); 
textbox1.addEventListener("keyup", tabForward, false); 
textbox2.addEventListener("keyup", tabForward, false); 
textbox3.addEventListener("keyup", tabForward, false); 
})();

代码其实很简单,判断输入字符串长度是否和事件目标的maxLength属性长度相等,若相等,且表单还有下一个字段,则自动切换到下一个焦点。

简单说下两个属性:

target.form form属性指向当前字段所属表单的指针,它是只读的

form.elements elements属性是表单中所有表单元素(字段)的集合。这个elements集合是一个有序列表,其中包含着表单中的所有字段,例如<input>、<textarea>、<button>和<fieldset>。每个表单字段在elements集合中的顺序,与他们出现在标记中的顺序相同,可以按照位置和name特性来访问它们。例如:

var form = document.getElementById("myForm"); 
var textbox1 = form.elements[0]; 
var textbox2 = form.elements["tel2"];

最后,我们再来看看上面的代码,发现它还存在一些问题,比如这段代码
var textbox1 = document.getElementById("txt1"); 
var textbox2 = document.getElementById("txt2"); 
var textbox3 = document.getElementById("txt3"); textbox1.addEventListener("keyup", tabForward, false); 
textbox2.addEventListener("keyup", tabForward, false); 
textbox3.addEventListener("keyup", tabForward, false);

发现没有,我们给每个字段添加了相同的事件处理程序。如果在复杂的web应用程序中,对每个元素都采用这种方式,那么结果就会有数不清的代码用于添加事件处理程序。此时,可以利用事件委托来解决这个问题

其他代码不变,将上面六行代码换为下面的两行会得到相同的结果,是不是感觉好多了呢

var form = document.getElementById("myForm"); 
form.addEventListener("keyup", tabForward, false);

那什么又是事件委托呢,简单说下原理,详细内容这里不解释

事件委托利用了事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。比如,这里的keyup事件,只需给form元素指定一个onkeyup事件处理程序,而不必给每个字段添加事件

Javascript 相关文章推荐
parseInt parseFloat js字符串转换数字
Aug 01 Javascript
JavaScript 中的日期和时间及表示标准介绍
Aug 21 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
Feb 12 Javascript
JQuery 图片滚动轮播示例代码
Mar 24 Javascript
原生JS实现拖拽图片效果
Aug 27 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
Jun 17 Javascript
Angular使用$http.jsonp发送跨站请求的方法
Mar 16 Javascript
原生JS实现 MUI导航栏透明渐变效果
Nov 07 Javascript
Bootstrap-table自定义可编辑每页显示记录数
Sep 07 Javascript
js实现简单的打印表格
Jan 15 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
Feb 11 Javascript
详解如何解决使用JSON.stringify时遇到的循环引用问题
Mar 23 Javascript
javascript中的取反再取反~~没有意义
Apr 06 #Javascript
jQuery toggleClass应用实例(附效果图)
Apr 06 #Javascript
javascript数组操作总结和属性、方法介绍
Apr 05 #Javascript
JavaScript中的prototype和constructor简明总结
Apr 05 #Javascript
JavaScript中的typeof操作符用法实例
Apr 05 #Javascript
Javascript排序算法之计数排序的实例
Apr 05 #Javascript
JavaScript中的正则表达式简明总结
Apr 04 #Javascript
You might like
东方红 - 来复式再生机的修复
2021/03/02 无线电
一个阿拉伯数字转中文数字的函数
2006/10/09 PHP
解析php中两种缩放图片的函数,为图片添加水印
2013/06/14 PHP
如何阻止网站被恶意反向代理访问(防网站镜像)
2014/03/18 PHP
PHP 中提示undefined index如何解决(多种方法)
2016/03/16 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
用php和jQuery来实现“顶”和“踩”的投票功能
2016/10/13 PHP
php观察者模式应用场景实例详解
2017/02/03 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
PHP用swoole+websocket和redis实现web一对一聊天
2019/11/05 PHP
JS OOP包机制,类创建的方法定义
2009/11/02 Javascript
Javascript 面向对象 对象(Object)
2010/05/13 Javascript
JQuery从头学起第二讲
2010/07/04 Javascript
基于jQuery的获得各种控件Value的方法
2010/11/19 Javascript
HTML上传控件取消选择
2013/03/06 Javascript
js操作输入框提示信息且响应鼠标事件
2014/03/25 Javascript
javascript实现带节日和农历的日历特效
2015/02/01 Javascript
实现非常简单的js双向数据绑定
2015/11/06 Javascript
网络传输协议(http协议)
2016/11/18 Javascript
JavaScript纯色二维码变成彩色二维码
2020/07/23 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
2017/06/01 Javascript
node.js实现为PDF添加水印的示例代码
2018/12/05 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
2019/04/15 Javascript
Django 导出 Excel 代码的实例详解
2017/08/11 Python
Python简单计算给定某一年的某一天是星期几示例
2018/06/27 Python
Python3.7中安装openCV库的方法
2018/07/11 Python
python opencv实现切变换 不裁减图片
2018/07/26 Python
解决python彩色螺旋线绘制引发的问题
2019/11/23 Python
安装不同版本的tensorflow与models方法实现
2021/02/20 Python
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
数控专业推荐信范文
2013/12/02 职场文书
调查研究项目计划书
2014/04/29 职场文书
简单通用的简历自我评价
2014/09/21 职场文书
入党个人总结范文
2015/03/02 职场文书
Spring Boot 启动、停止、重启、状态脚本
2021/06/26 Java/Android
PYTHON使用Matplotlib去实现各种条形图的绘制
2022/03/22 Python