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


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 相关文章推荐
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
Sep 27 Javascript
validator验证控件使用代码
Nov 23 Javascript
jquery getScript动态加载JS方法改进详解
Nov 15 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
Jul 20 Javascript
angular指令笔记ng-options的使用方法
Sep 18 Javascript
使用vue2实现购物车和地址选配功能
Mar 29 Javascript
vue源码学习之Object.defineProperty对象属性监听
May 30 Javascript
webpack常用构建优化策略小结
Nov 21 Javascript
实例分析javascript中的异步
Jun 02 Javascript
微信小程序自定义顶部组件customHeader的示例代码
Jun 03 Javascript
js实现翻牌小游戏
Jul 31 Javascript
js利用拖放实现添加删除
Aug 27 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
Codeigniter框架的更新事务(transaction)BUG及解决方法
2014/07/25 PHP
php实现过滤字符串中的中文和数字实例
2015/07/29 PHP
简单谈谈PHP中的include、include_once、require以及require_once语句
2016/04/23 PHP
PHP中仿制 ecshop验证码实例
2017/01/06 PHP
jQuery 学习第六课 实现一个Ajax的TreeView
2010/05/17 Javascript
javascript中的关于类型转换的性能优化
2010/12/14 Javascript
JQuery以JSON方式提交数据到服务端示例代码
2014/05/05 Javascript
JavaScript实现的双向跨域插件分享
2015/01/31 Javascript
angularJS 中$scope方法使用指南
2015/02/09 Javascript
js实现带按钮的上下滚动效果
2015/05/12 Javascript
浅谈JavaScript字符串与数组
2015/06/03 Javascript
AngularJS基础 ng-value 指令简单示例
2016/08/03 Javascript
javascript 中select框触发事件过程的分析
2017/08/01 Javascript
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
vuex actions传递多参数的处理方法
2018/09/18 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
2019/07/29 Javascript
Python 列表理解及使用方法
2017/10/27 Python
python自动查询12306余票并发送邮箱提醒脚本
2018/05/21 Python
Sanic框架Cookies操作示例
2018/07/17 Python
Django实现跨域请求过程详解
2019/07/25 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
Python使用for生成列表实现过程解析
2020/09/22 Python
python归并排序算法过程实例讲解
2020/11/04 Python
Django自带用户认证系统使用方法解析
2020/11/12 Python
Html5上传图片 移动端、PC端通用代码
2016/06/08 HTML / CSS
KIKO MILANO荷兰网上商店:意大利专业化妆品品牌
2017/05/12 全球购物
TecoBuy澳大利亚:在线电子和小工具商店
2020/06/25 全球购物
幼儿园数学教学反思
2014/02/02 职场文书
远程研修随笔感言
2014/02/10 职场文书
运动会入场式解说词
2014/02/18 职场文书
简单的离婚协议书范本
2014/11/16 职场文书
成功的商业计划书这样写才最靠谱
2019/07/12 职场文书
导游词之泉州崇武古城
2019/12/20 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers
使用pandas或numpy处理数据中的空值(np.isnan()/pd.isnull())
2021/05/14 Python
Redis集群节点通信过程/原理流程分析
2022/03/18 Redis