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

时间: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
投稿

猜你喜欢

  • 关于JS中变量的显式申明和隐式申明

    2008-09-12 13:04:00
  • 将 html 转成 ubb代码的小脚本

    2013-06-25 07:07:00
  • 对python-3-print重定向输出的几种方法总结

    2023-10-21 19:38:58
  • 编写Python脚本来实现最简单的FTP下载的教程

    2022-11-12 01:25:45
  • MySQL的加密解密的几种方式(小结)

    2024-01-17 06:25:22
  • python pandas query的使用方法

    2023-01-14 06:23:33
  • python使用tornado实现简单爬虫

    2022-07-07 12:03:08
  • 关于js遍历表格的实例

    2024-04-18 09:29:21
  • 最新idea2021注册码永久激活(激活到2100年)

    2023-06-21 01:42:42
  • 深入了解Python的类与模块化

    2021-04-18 11:28:29
  • python PyTorch预训练示例

    2022-07-06 18:24:02
  • 利用numpy+matplotlib绘图的基本操作教程

    2021-01-26 11:14:31
  • pandas分组聚合详解

    2023-06-28 15:50:25
  • JavaScript中的this指向问题详解

    2024-04-28 09:46:58
  • 微信小程序上传图片到php服务器的方法

    2023-11-07 11:57:25
  • python3调用c语言代码的全过程记录

    2022-12-06 05:00:24
  • 微信小程序时间轴实现方法示例

    2024-04-18 10:02:17
  • 浅谈vue项目可以从哪些方面进行优化

    2024-05-09 15:19:50
  • MySQL SELECT同时UPDATE同一张表问题发生及解决

    2024-01-25 05:32:31
  • Python通过类的组合模拟街道红绿灯

    2021-04-13 02:00:24
  • asp之家 网络编程 m.aspxhome.com