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


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 相关文章推荐
5个javascript的数字格式化函数分享
Dec 07 Javascript
jquery命令汇总,方便使用jquery的朋友
Jun 26 Javascript
javascript对中文按照拼音排序代码
Aug 20 Javascript
jQuery中first()方法用法实例
Jan 06 Javascript
JavaScript设置body高度为浏览器高度的方法
Feb 09 Javascript
Js+Ajax,Get和Post在使用上的区别小结
Jun 08 Javascript
jQuery表格的维护和删除操作
Feb 03 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
Dec 28 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
May 23 Javascript
vue项目中使用Svg的方法
Oct 24 Javascript
jQuery 动态粒子效果示例代码
Jul 07 jQuery
JavaScript Html实现移动端红包雨功能页面
Jan 10 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
async和DOM Script文件加载比较
2014/07/20 PHP
ThinkPHP提交表单时默认自动转义的解决方法
2014/11/25 PHP
PHP常用字符串函数小结(推荐)
2018/08/05 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
PHP7变量处理机制修改
2021/03/09 PHP
IE JS无提示关闭窗口不提示的方法
2010/04/29 Javascript
为jQuery增加join方法的实现代码
2010/11/28 Javascript
JS中的构造函数详细解析
2014/03/10 Javascript
jQuery简单图表peity.js使用示例
2014/05/02 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
2015/02/28 Javascript
JS实现图片局部放大或缩小的方法
2016/08/20 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
2017/09/26 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
2019/06/14 Javascript
微信小程序防止多次点击跳转(函数节流)
2019/09/19 Javascript
Vue项目打包部署到iis服务器的配置方法
2019/10/14 Javascript
Vue获取微博授权URL代码实例
2020/11/04 Javascript
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
python实现简单socket通信的方法
2016/04/19 Python
python自动结束mysql慢查询会话的实例代码
2019/10/27 Python
PyInstaller的安装和使用的详细步骤
2020/06/02 Python
Python如何实现线程间通信
2020/07/30 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
西班牙在线宠物食品和配件商店:bitiba
2019/10/11 全球购物
Linux常见面试题
2016/10/04 面试题
社区优秀志愿者材料
2014/02/02 职场文书
高一数学教学反思
2014/02/07 职场文书
经理管理专业毕业自荐书范文
2014/02/12 职场文书
留学生求职信
2014/06/03 职场文书
2014年向国旗敬礼活动总结
2014/09/27 职场文书
董事长助理岗位职责
2015/02/11 职场文书
管理失职检讨书范文
2015/05/05 职场文书
2016年猴年新春致辞
2015/08/01 职场文书
队名及霸气口号大全
2015/12/25 职场文书
Echarts如何重新渲染实例详解
2022/05/30 Javascript