使用 JavaScript可以从多个方面增强表单字段的易用性。其中，常见的一种方式就是在用户填写 完当前字段时，自动将焦点切换到下一个字段。通常，在自动切换焦点之前，必须知道用户已经输入了 既定长度的数据（例如电话号码）。例如，中国的电话号码通常会分为三部分：区号（86）、省区号和另外 8 位 数字。为取得完整的电话号码，很多网页中都会提供下列 3个文本框： 网站建设
<input type="text" name="tel1" id="txtTel1" maxlength="2">
<input type="text" name="tel2" id="txtTel2" maxlength="4">
<input type="text" name="tel3" id="txtTel3" maxlength="8">
为增强易用性，同时加快数据输入，可以在前一个文本框中的字符达到大数量后，自动将焦点切换到下一个文本框。换句话说，用户在第一个文本框中输入了 2个数字之后，焦点就会切换到第二个文 本框，再输入 4个数字，焦点又会切换到第三个文本框。这种“自动切换焦点”的功能，可以通过下列代码实现：
<!DOCTYPE html>
<html>
<head>
<title>表单字段自动切换焦点实例</title>
<script type="text/javascript" src="EventUtil.js"></script>
</head>
<body>
<form method="post" action="http://www.jxbh.cn">
<p>Enter your telephone number:</p>
<input type="text" name="tel1" id="txtTel1" size="2" maxlength="2" >
<input type="text" name="tel2" id="txtTel2" size="4" maxlength="4" >
<input type="text" name="tel3" id="txtTel3" size="8" maxlength="8" >
<input type="submit" value="Submit">
</form>
<script type="text/javascript">
(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"),
textbox2 = document.getElementById("txtTel2"),
textbox3 = document.getElementById("txtTel3");
EventUtil.addHandler(textbox1, "keyup", tabForward);
EventUtil.addHandler(textbox2, "keyup", tabForward);
EventUtil.addHandler(textbox3, "keyup", tabForward);
})();
</script>
</body>
</html>
在此天津网站建设公司匠人匠心前端工程师告诉大家 tabForward()函数是实现“自动切换焦点”的关键所在。这个函数通过比较用户输入的值 与文本框的 maxlength 特性，可以确定是否已经达到大长度。如果这两个值相等（因为浏览器终 会强制它们相等，因此用户绝不会多输入字符），则需要查找表单字段集合，直至找到下一个文本框。 找到下一个文本框之后，则将焦点切换到该文本框。然后，我们把这个函数指定为每个文本框的 onkeyup 事件处理程序。由于 keyup 事件会在用户输入了新字符之后触发，所以此时是检测文本框中内容长度 的佳时机。这样一来，用户在填写这个简单的表单时，就不必再通过按制表键切换表单字段和提交表单了。 不过请记住，这些代码只适用于前面给出的标记，而且没有考虑隐藏字段。
推荐阅读：
1.响应式网站建设存在的技术难点及对日常维护的影响
2.网站建设实用技术HTML5到底有何神通
3.网站建设中常用的数据库技术有哪些
4.科普建站知识：网站分类和技术构架
以上内容由匠人匠心科技（http://www.wzjs888.com）为您提供，转载请注明出处，更多有关天津网站建设，软件开发，网站代运营优化、微信网站制作(微官网)、手机app开发、企业UI设计等互联网应用服务都可以联系我们。热线：138-2142-0129或致电136-2215-0903张经理。
匠人匠心科技每天都会不定时更新有关天津网站制作以及网络营销推广的文章，希望对您有用。
