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


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 相关文章推荐
jQuery EasyUI API 中文文档 - Menu菜单
Oct 03 Javascript
js控制的回到页面顶端goTop的代码实现
Mar 20 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
Jul 15 Javascript
js实现a标签超链接提交form表单的方法
Jun 24 Javascript
JavaScript函数中关于valueOf和toString的理解
Jun 14 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
Dec 21 Javascript
Node.JS中事件轮询(Event Loop)的解析
Feb 25 Javascript
Angular.js中控制器之间的传值详解
Apr 24 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 Javascript
pageGroup.js实现分页功能
Jul 27 Javascript
vue实现输入框自动跳转功能
May 20 Javascript
Promise静态四兄弟实现示例详解
Jul 07 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中通过Ajax如何实现异步文件上传的代码实例
2011/05/07 PHP
zf框架的校验器InArray使用示例
2014/03/13 PHP
ThinkPHP实现动态包含文件的方法
2014/11/29 PHP
解决PHP里大量数据循环时内存耗尽的方法
2015/10/10 PHP
PHP filesize函数用法浅析
2019/02/15 PHP
laravel 解决Eloquent ORM的save方法无法插入数据的问题
2019/10/21 PHP
jQuery maxlength文本字数限制插件
2010/04/16 Javascript
js 可拖动列表实现代码
2011/12/13 Javascript
如何用js控制frame的隐藏或显示的解决办法
2013/03/20 Javascript
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
jQuery拖拽div实现思路
2014/02/19 Javascript
jQuery实现的分子运动小球碰撞效果
2016/01/27 Javascript
js实现div在页面拖动效果
2016/05/04 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
2016/06/29 Javascript
AngularJS应用开发思维之依赖注入3
2016/08/19 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
2017/03/27 jQuery
vue.js vue-router如何实现无效路由(404)的友好提示
2017/12/20 Javascript
详解JS实现简单的时分秒倒计时代码
2019/04/25 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
2019/05/14 Javascript
Swiper.js实现移动端元素左右滑动
2019/09/08 Javascript
layer.js之回调销毁对话框的例子
2019/09/11 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
Python编程之变量赋值操作实例分析
2017/07/24 Python
Python切片工具pillow用法示例
2018/03/30 Python
python 实现A*算法的示例代码
2018/08/13 Python
python实例化对象的具体方法
2020/06/17 Python
pytorch 查看cuda 版本方式
2020/06/23 Python
html5 canvas合成海报所遇问题及解决方案总结
2017/08/03 HTML / CSS
北欧最好的童装网上商店:Babyshop
2019/09/15 全球购物
教师个人鉴定材料
2014/02/08 职场文书
品牌转让协议书
2014/08/20 职场文书
团代会开幕词
2015/01/28 职场文书
Java数组与堆栈相关知识总结
2021/06/29 Java/Android
Python 多线程处理任务实例
2021/11/07 Python