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


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封装的不错的选项卡效果代码
Feb 15 Javascript
jQuery 动画弹出窗体支持多种展现方式
Apr 29 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
Sep 17 Javascript
JQuery防止退格键网页后退的实现代码
Mar 23 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
Jun 29 Javascript
Js实现滚动变色的文字效果
Jun 16 Javascript
javascript发送短信验证码实现代码
Nov 12 Javascript
仅30行代码实现Javascript中的MVC
Feb 15 Javascript
JS实现点击事件统计的简单实例
Jul 10 Javascript
详解Vue.js自定义tipOnce指令用法实例
Dec 19 Javascript
js 计算月/周的第一天和最后一天代码
Feb 01 Javascript
js如何验证密码强度
Mar 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数组函数序列之array_search()- 按元素值返回键名
2011/11/04 PHP
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
编写Smarty插件在模板中直接加载数据的详细介绍
2013/06/26 PHP
PHP中批量生成静态html(命令行下运行PHP)
2014/04/19 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
js程序中美元符号$是什么
2008/06/05 Javascript
IE与Firefox在JavaScript上的7个不同写法小结
2009/09/14 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
AngularJS 如何在控制台进行错误调试
2016/06/07 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
2016/06/12 Javascript
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
2018/03/15 Javascript
JS实现的透明度渐变动画效果示例
2018/04/28 Javascript
微信小程序实现炫酷的弹出式菜单特效
2019/01/28 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
2019/09/25 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
2020/10/29 Javascript
js实现筛选功能
2020/11/24 Javascript
[03:17]DOTA2英雄基础教程 剧毒术士
2013/12/12 DOTA
Python安装Imaging报错:The _imaging C module is not installed问题解决方法
2014/08/22 Python
简单的Apache+FastCGI+Django配置指南
2015/07/22 Python
opencv转换颜色空间更改图片背景
2019/08/20 Python
PyCharm如何导入python项目的方法
2020/02/06 Python
Python sublime安装及配置过程详解
2020/06/29 Python
Python 爬虫性能相关总结
2020/08/03 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
python温度转换华氏温度实现代码
2020/12/06 Python
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
ProBikeKit德国:在线公路自行车专家
2018/06/03 全球购物
大课间体育活动方案
2014/03/12 职场文书
应聘教师求职信
2014/07/19 职场文书
师德先进个人事迹材料
2014/12/19 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
同学联谊会邀请函
2019/06/24 职场文书
关于销售人员的年终工作总结要点
2019/08/15 职场文书
MySQL三种方式实现递归查询
2022/04/18 MySQL