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


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 相关文章推荐
求解开jscript.encode代码的asp函数
Feb 28 Javascript
用dom+xhtml+css制作的一个相册效果代码打包下载
Jan 24 Javascript
javascript 装载iframe子页面,自适应高度
Mar 20 Javascript
js中符号转意问题示例探讨
Aug 19 Javascript
jquery三个关闭弹出层的小示例
Nov 05 Javascript
jquery实现手风琴效果实例代码
Nov 15 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
Apr 02 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
Nov 02 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
Nov 30 Javascript
vue、react等单页面项目应该这样子部署到服务器
Jan 03 Javascript
Vue2.2.0+新特性整理及注意事项
Aug 22 Javascript
微信小程序遍历Echarts图表实现多个饼图
Apr 25 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实现WEB动态网页静态
2006/10/09 PHP
PHP autoload与spl_autoload自动加载机制的深入理解
2013/06/05 PHP
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
javascript数组与php数组的地址传递及值传递用法实例
2015/01/22 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
PHP simplexml_load_file()函数讲解
2019/02/03 PHP
javascript实现点击按钮让DIV层弹性移动的方法
2015/02/24 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
2015/03/24 Javascript
AngularJS快速入门
2015/04/02 Javascript
JavaScript字符串删除重复字符的方法
2015/12/25 Javascript
Ext JS动态加载JavaScript创建窗体的方法
2016/06/23 Javascript
简单的JS轮播图代码
2016/07/18 Javascript
JavaScript编写九九乘法表(两种任选)
2017/02/04 Javascript
Bootstrap超大屏幕的实现代码
2017/03/22 Javascript
NodeJs项目中关闭ESLint的方法
2018/08/09 NodeJs
vue-cli 首屏加载优化问题
2018/11/06 Javascript
vue路由中前进后退的一些事儿
2019/05/18 Javascript
python选择排序算法的实现代码
2013/11/21 Python
Python 时间操作例子和时间格式化参数小结
2014/04/24 Python
将字典转换为DataFrame并进行频次统计的方法
2018/04/08 Python
Python 将Matrix、Dict保存到文件的方法
2018/10/30 Python
python集合是否可变总结
2019/06/20 Python
Python图片的横坐标汉字实例
2019/12/04 Python
Python随机数函数代码实例解析
2020/02/09 Python
浅谈python 中的 type(), dtype(), astype()的区别
2020/04/09 Python
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
澳大利亚UGG工厂直销:Australian Ugg Boots
2017/10/14 全球购物
什么是重载?CTS、CLS和CLR分别做何解释
2012/05/06 面试题
规划编制实施方案
2014/03/15 职场文书
幼儿园评语大全
2014/04/17 职场文书
优秀德育工作者事迹材料
2014/05/07 职场文书
结对共建工作方案
2014/06/02 职场文书
个人工作表现评价材料
2014/09/21 职场文书
市场部岗位职责范本
2015/04/15 职场文书
工会文体活动总结
2015/05/07 职场文书
JavaScript中的宏任务和微任务详情
2021/11/27 Javascript