当达到输入长度时表单自动切换焦点
发布时间:2024-05-02 17:29:33
标签:表单,切换焦点
有时候会遇到和上面类似的表单字段。我们可以给每个字段限制输入长度,当达到输入长度时自动切换焦点,以增强表单的易用性
<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事件处理程序,而不必给每个字段添加事件
0
投稿
猜你喜欢
- google前不久推出了Google Ajax Library API,说白了就是提供几个知名js库的host,目前有:jQueryprot
- 介绍Django是一个Web框架——一套用于帮助开发交互式网站的工具。Django能够响应网页请求,还能让我们更轻松地读写数据库、管理用户等
- 怎么从mysql从官网下载到安装到客户端的登陆呢?这篇文章给你讲的清清楚楚。第一步:到Mysql官网下载。从[https://dev.mys
- Python字符串的format函数format()函数用来收集其后的位置参数和关键字段参数,并用他们的值填充字符串中的占位符。通常格式如下
- 本文实例讲述了Python多线程操作之互斥锁、递归锁、信号量、事件。分享给大家供大家参考,具体如下:互斥锁:为什么要有互斥锁:由于多线程是并
- 下面给出ORACLE的一种实现方式,要分2步走:1. 建立 SEQUENCE CREATE [ OR REPLACE ] SEQUENCE
- 使用Python绘制正态分布曲线,借助matplotlib绘图工具;#-*-coding:utf-8-*-"""
- expand表示是否把series类型转化为DataFrame类型下面代码中的n表示去掉下划线"_"的数量代码如下:im
- 提示: 利用单表简单查询和多表高级查询技能,并且根据查询要求灵活使用内连接查询、外连接查询或子查询等。同时还利用内连接查询的两种格式、三种外
- 在JavaScript中我们需要用到trim的地方很多,但是JavaScript又没有独立的trim函数或者方法可以使用,所以我们需要自己写
- 一、asp.net中导出Execl的方法:在asp.net中导出Execl有两种方法,一种是将导出的文件存放在服务器某个文件夹下面,然后将文
- 本文用163邮箱进行了测试,python用的是3.8版本进行的测试1.设置邮箱,如下图所示2.设置过程如下图所示:设置完成后,添加如下代码:
- python提供了两个非常重要的功能来处理python程序在运行中出现的异常和错误。你可以使用该功能来调试python程序。1.异常处理:
- // 去掉字符串的头空格(左空格) function LTrim(str){ var i; for(i=0;i<str.length;
- 我们在工作中经常强调沟通能力,和产品、开发、测试等不同角色的人需要沟通,和领导、同事需要沟通,沟通是一个双向的过程,而沟通首先需要双方有良好
- 在图书馆的检索系统中,关于图书的信息里面有一个是图书相关借阅关系图。跟这个社交网络图是一样的,反映了不同对象间的关联性。利用python画社
- 因为有大家的支持,我们才能做到现在,感谢你们这一路上对我们的支持.在这篇文章中,我们将主要针对MySQL的实用技巧,讲讲面试中相关的问题.1
- 大家好,本文将分享如何使用matplotlib制作动态条形图,制作的图很美,这个是我在之前发布的一篇中使用的图片,效果如下制作思路为了方便大
- PyQt5选项卡控件QTabWidget简介QTabWidget控件提供了一个选项卡和一个页面区域,默认显示第一个选项卡的页面,通过单击各选
- 在网站或软件的策划和设计过程中,我们经常听到这样的讨论:“这个功能设计得太重了”又或“我们希望能够处理得轻一些”。似乎轻设计是时下炙手可热的