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


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实现省市select下拉框的替换(示例代码)
Feb 22 Javascript
前端必备神器 Snap.svg 弹动效果
Nov 10 Javascript
JQuery日历插件My97DatePicker日期范围限制
Jan 20 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
Aug 21 Javascript
第五章之BootStrap 栅格系统
Apr 25 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
May 31 Javascript
js实现StringBuffer的简单实例
Sep 02 Javascript
jquery UI Datepicker时间控件冲突问题解决
Dec 16 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
详解iframe跨域的几种常用方法(小结)
Apr 29 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
Jul 22 Javascript
详解TypeScript中的类型保护
Apr 29 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操作mysql数据库的基本类代码
2014/02/25 PHP
php面向对象中的魔术方法中文说明
2014/03/04 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
JavaScript经典效果集锦
2010/07/06 Javascript
Jquery Change与bind事件代码
2011/09/29 Javascript
js自动生成对象的属性示例代码
2013/10/28 Javascript
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
JS对象与json字符串格式转换实例
2014/10/28 Javascript
jquery常用方法及使用示例汇总
2014/11/08 Javascript
jQuery解析json格式数据简单实例
2016/01/22 Javascript
jQuery实现图片局部放大镜效果
2016/03/17 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
jQuery插件form-validation-engine正则表达式操作示例
2017/02/09 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
2018/09/06 jQuery
深入浅析js原型链和vue构造函数
2018/10/25 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
2020/05/27 Javascript
js实现数字跳动到指定数字
2020/08/25 Javascript
使用python实现拉钩网上的FizzBuzzWhizz问题示例
2014/05/05 Python
Python科学计算环境推荐——Anaconda
2014/06/30 Python
Python基于回溯法子集树模板解决野人与传教士问题示例
2017/09/11 Python
python反编译学习之字节码详解
2019/05/19 Python
Pandas之DataFrame对象的列和索引之间的转化
2019/06/25 Python
Python  Django 母版和继承解析
2019/08/09 Python
python求加权平均值的实例(附纯python写法)
2019/08/22 Python
django 连接数据库出现1045错误的解决方式
2020/05/14 Python
pycharm 2020.2.4 pip install Flask 报错 Error:Non-zero exit code的问题
2020/12/04 Python
英国领先的餐饮折扣俱乐部:Gourmet Society
2020/07/26 全球购物
什么是GWT的Module
2013/01/20 面试题
求职简历的自我评价怎样写好
2013/10/07 职场文书
大学生自我评价范文分享
2014/02/21 职场文书
应急管理培训方案
2014/06/12 职场文书
计划生育证明书写要求
2014/09/17 职场文书
资料员岗位职责
2015/02/10 职场文书
Spring中的使用@Async异步调用方法
2021/11/01 Java/Android
CSS 实现角标效果的完整代码
2022/06/28 HTML / CSS