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

有时候会遇到和上面类似的表单字段。我们可以给每个字段限制输入长度，当达到输入长度时自动切换焦点，以增强表单的易用性

复制代码 代码如下:

-
-

复制代码 代码如下:

(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集合是一个有序列表，其中包含着表单中的所有字段，例如、、<button>和<fieldset>。每个表单字段在elements集合中的顺序，与他们出现在标记中的顺序相同，可以按照位置和name特性来访问它们。例如： <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="72064" class="copybut" id="copybut72064" onclick="doCopy('code72064')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code72064"> <br>var form = document.getElementById("myForm"); <br>var textbox1 = form.elements[0]; <br>var textbox2 = form.elements["tel2"]; <br> </div> <br>最后，我们再来看看上面的代码，发现它还存在一些问题，比如这段代码 <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="11585" class="copybut" id="copybut11585" onclick="doCopy('code11585')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code11585"> <br>var textbox1 = document.getElementById("txt1"); <br>var textbox2 = document.getElementById("txt2"); <br>var textbox3 = document.getElementById("txt3"); <br><br>textbox1.addEventListener("keyup", tabForward, false); <br>textbox2.addEventListener("keyup", tabForward, false); <br>textbox3.addEventListener("keyup", tabForward, false); <br> </div> <br>发现没有，我们给每个字段添加了相同的事件处理程序。如果在复杂的web应用程序中，对每个元素都采用这种方式，那么结果就会有数不清的代码用于添加事件处理程序。此时，可以利用事件委托来解决这个问题 <br><br>其他代码不变，将上面六行代码换为下面的两行会得到相同的结果，是不是感觉好多了呢 <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="93022" class="copybut" id="copybut93022" onclick="doCopy('code93022')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code93022"> <br>var form = document.getElementById("myForm"); <br>form.addEventListener("keyup", tabForward, false); <br> </div> <br>那什么又是事件委托呢，简单说下原理，详细内容这里不解释 <br><br>事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。比如，这里的keyup事件，只需给form元素指定一个onkeyup事件处理程序，而不必给每个字段添加事件 </fieldset></button>