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


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 相关文章推荐
js常用函数 不错
Sep 08 Javascript
Jquery通过JSON字符串创建JSON对象
Aug 24 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
Sep 03 Javascript
jQuery无刷新切换主题皮肤实例讲解
Oct 21 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
Nov 30 Javascript
JS原型对象的创建方法详解
Jun 16 Javascript
switch语句的妙用(必看篇)
Oct 03 Javascript
JS分页的实现(同步与异步)
Sep 16 Javascript
24行JavaScript代码实现Redux的方法实例
Nov 17 Javascript
Vue实现图片与文字混输效果
Dec 04 Javascript
vue根据条件不同显示不同按钮的操作
Aug 04 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
Sep 18 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实现的农历算法实例
2015/08/11 PHP
javascript RadioButtonList获取选中值
2009/04/09 Javascript
jquery实现图片翻页效果
2013/12/23 Javascript
jquery教程ajax请求json数据示例
2014/01/13 Javascript
jquery中添加属性和删除属性
2015/06/03 Javascript
js中对函数设置默认参数值的3种方法
2015/10/23 Javascript
javascript作用域、作用域链(菜鸟必看)
2016/06/16 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
2016/12/28 Javascript
JS优化与惰性载入函数实例分析
2017/04/06 Javascript
使用canvas进行图像编辑的实例
2017/08/29 Javascript
JSON 数据格式详解
2017/09/13 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
2017/09/19 Javascript
vue axios请求超时的正确处理方法
2018/04/02 Javascript
javascript的this关键字详解
2019/05/20 Javascript
vue如何实现自定义底部菜单栏
2019/07/01 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
2019/09/06 Javascript
关于vue组件事件属性穿透详解
2019/10/28 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
2019/11/08 Javascript
[01:08:30]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第一场 2月28日
2021/03/11 DOTA
Python调用C# Com dll组件实战教程
2017/10/12 Python
python:动态路由的Flask程序代码
2019/11/22 Python
如何基于python操作excel并获取内容
2019/12/24 Python
Python中filter与lambda的结合使用详解
2019/12/24 Python
Python实现对word文档添加密码去除密码的示例代码
2020/12/29 Python
python脚本使用阿里云slb对恶意攻击进行封堵的实现
2021/02/04 Python
css3背景_动力节点Java学院整理
2017/07/11 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
2015/05/08 HTML / CSS
打造经典复古风格的品牌:Alice + Olivia(爱丽丝+奥利维亚)
2016/09/07 全球购物
会计应聘求职信范文
2013/12/17 职场文书
放飞蜻蜓反思
2014/02/05 职场文书
年终考核实施方案
2014/05/26 职场文书
首都博物馆观后感
2015/06/05 职场文书
2016入党培训心得体会范文
2016/01/08 职场文书
导游词之西安大清真寺
2019/12/17 职场文书
zabbix监控mysql的实例方法
2021/06/02 MySQL
浅谈react useEffect闭包的坑
2021/06/08 Javascript