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


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 相关文章推荐
javascript 事件查询综合 推荐收藏
Mar 10 Javascript
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
Mar 18 Javascript
LazyLoad 延迟加载(按需加载)
May 31 Javascript
javascript中的遍历for in 以及with的用法
Dec 22 Javascript
基于javascript的COOkie的操作实现只能点一次
Dec 26 Javascript
JavaScript数组和循环详解
Apr 27 Javascript
js使用generator函数同步执行ajax任务
Sep 05 Javascript
javascript高级模块化require.js的具体使用方法
Oct 31 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
Dec 20 Javascript
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
Vant的安装和配合引入Vue.js项目里的方法步骤
Dec 05 Javascript
修改Vue打包后的默认文件名操作
Aug 12 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
ftp类(myftp.php)
2006/10/09 PHP
Snoopy类使用小例子
2008/04/15 PHP
PHP统计目录中文件以及目录中目录大小的方法
2016/01/09 PHP
Yii2使用$this-&gt;context获取当前的Module、Controller(控制器)、Action等
2017/03/29 PHP
Laravel 5.4重新登录实现跳转到登录前页面的原理和方法
2017/07/13 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
js获取当前select 元素值的代码
2010/04/19 Javascript
js修改table中Td的值(定义td的双击事件)
2013/01/10 Javascript
js+数组实现网页上显示时间/星期几的实用方法
2013/01/18 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
2014/06/30 Javascript
js实现window.open不被拦截的解决方法汇总
2014/10/30 Javascript
JavaScript将XML转成JSON的方法
2015/03/12 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
2015/09/16 Javascript
简单掌握JavaScript中const声明常量与变量的用法
2016/05/21 Javascript
带有定位当前位置的百度地图前端web api实例代码
2016/06/21 Javascript
jQuery实现打开页面渐现效果示例
2016/07/27 Javascript
js实现京东轮播图效果
2017/06/30 Javascript
使用javascript函数编写简单银行取钱存钱流程
2018/05/26 Javascript
Vue中的vue-resource示例详解
2018/11/02 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
2019/06/24 Javascript
vue项目部署到nginx/tomcat服务器的实现
2019/08/26 Javascript
原生JS实现微信通讯录
2020/06/18 Javascript
python类定义的讲解
2013/11/01 Python
Django uwsgi Nginx 的生产环境部署详解
2019/02/02 Python
Python如何实现小程序 无限求和平均
2020/02/18 Python
Python处理mysql特殊字符的问题
2020/03/02 Python
Marc Jacobs彩妆官网:Marc Jacobs Beauty
2017/07/03 全球购物
运动鞋中的劳斯莱斯:索康尼(SAUCONY)
2017/08/09 全球购物
Gloeilampgoedkoop荷兰:在线购买灯泡
2019/02/16 全球购物
给朋友的道歉信
2014/01/09 职场文书
帮一个朋友写的求职信
2014/08/09 职场文书
科学发展观演讲稿
2014/09/11 职场文书
乡镇组织委员个人整改措施
2014/09/16 职场文书
小学班主任自我评价
2015/03/11 职场文书
MySQL系列之八 MySQL服务器变量
2021/07/02 MySQL
基于Redis zSet实现滑动窗口对短信进行防刷限流的问题
2022/02/12 Redis