当达到输入长度时表单自动切换焦点_javascript技巧
程序员文章站
2022-04-14 16:50:43
...
有时候会遇到和上面类似的表单字段。我们可以给每个字段限制输入长度，当达到输入长度时自动切换焦点，以增强表单的易用性
复制代码 代码如下:
复制代码 代码如下:
(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 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集合是一个有序列表，其中包含着表单中的所有字段，例如、