自动切换焦点的代码实现

javascript高级程序设计（第三版）

自动切换焦点的代码实现

例如，美国的电话号码通常会分为三部分：区号、局号和另外4 位
数字。为取得完整的电话号码，很多网页中都会提供下列3 个文本框：

<input type="text" name="tel1" id="txtTel1" maxlength="3">

<input type="text" name="tel2" id="txtTel2" maxlength="3">

<input type="text" name="tel3" id="txtTel3" maxlength="4">

(function(){
function tabForward(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
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+1]){
form.elements[i+1].focus();
}
return;
}
}
}
}
var textbox1 = document.getElementById("txtTel1");
var textbox2 = document.getElementById("txtTel2");
var textbox3 = document.getElementById("txtTel3");
EventUtil.addHandler(textbox1, "keyup", tabForward);
EventUtil.addHandler(textbox2, "keyup", tabForward);
EventUtil.addHandler(textbox3, "keyup", tabForward);
})();

开始的tabForward()函数是实现“自动切换焦点”的关键所在。这个函数通过比较用户输入的值
与文本框的maxlength 特性，可以确定是否已经达到最大长度。如果这两个值相等（因为浏览器最终
会强制它们相等，因此用户绝不会多输入字符），则需要查找表单字段集合，直至找到下一个文本框。
找到下一个文本框之后，则将焦点切换到该文本框。然后，我们把这个函数指定为每个文本框的onkeyup
事件处理程序。由于keyup 事件会在用户输入了新字符之后触发，所以此时是检测文本框中内容长度
的最佳时机。这样一来，用户在填写这个简单的表单时，就不必再通过按制表键切换表单字段和提交表
单了。
不过请记住，这些代码只适用于前面给出的标记，而且没有考虑隐藏字段。