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


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 相关文章推荐
jquery 问答知识整理
Feb 11 Javascript
一个可拖拽列宽表格实例演示
Nov 26 Javascript
文本框回车提交与禁止提交示例
Sep 27 Javascript
jQuery中:reset选择器用法实例
Jan 04 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
Feb 27 Javascript
jQuery实现折线图的方法
Feb 28 Javascript
微信小程序富文本渲染引擎的详解
Sep 30 Javascript
node.js中http模块和url模块的简单介绍
Oct 06 Javascript
从零开始搭建一个react项目开发
Feb 09 Javascript
8 个有用的JS技巧(推荐)
Jul 03 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
Aug 26 Javascript
JavaScript设计模型Iterator实例解析
Jan 22 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
队列在编程中的实际应用(php)
2010/09/04 PHP
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 2611816 bytes)
2014/11/08 PHP
YII使用url组件美化管理的方法
2015/12/28 PHP
PHP观察者模式原理与简单实现方法示例
2017/08/25 PHP
不能再简单的无闪刷新验证码原理很简单
2007/11/05 Javascript
关于JS管理作用域的问题
2013/04/10 Javascript
jQuery的基本概念与高级编程
2015/05/14 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
2016/04/01 Javascript
canvas绘制环形进度条
2017/02/23 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
2017/09/16 Javascript
如何更好的编写js async函数
2018/05/13 Javascript
vue项目打包部署到服务器的方法示例
2018/08/27 Javascript
详解Axios统一错误处理与后置
2018/09/26 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
2018/10/22 Javascript
详解Vue.js自定义tipOnce指令用法实例
2018/12/19 Javascript
vue项目配置使用flow类型检查的步骤
2020/03/18 Javascript
基于JavaScript实现控制下拉列表
2020/05/08 Javascript
vue实现两个组件之间数据共享和修改操作
2020/11/12 Javascript
[03:40]DOTA2抗疫特别篇《英雄年代》
2020/02/28 DOTA
Python学习笔记之解析json的方法分析
2017/04/21 Python
python自动登录12306并自动点击验证码完成登录的实现源代码
2018/04/25 Python
python矩阵转换为一维数组的实例
2018/06/05 Python
Python图像处理之颜色的定义与使用分析
2019/01/03 Python
如何从csv文件构建Tensorflow的数据集
2020/09/21 Python
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
程序员经常用到的UNIX命令
2015/04/13 面试题
品质主管的岗位职责
2013/12/04 职场文书
夜不归宿检讨书
2014/02/25 职场文书
公益广告宣传方案
2014/02/28 职场文书
2014年初三班主任工作总结
2014/12/05 职场文书
团员年度个人总结
2015/02/26 职场文书
《风筝》教学反思
2016/02/23 职场文书
如何写好开幕词?
2019/06/24 职场文书
用golang如何替换某个文件中的字符串
2021/04/25 Golang