文本框组脚本_自动切换焦点“例如加区号和分机号的电话号码文本框组” P426
注：此例只适用于文本框组，没有考虑隐藏字段。
DOCTYPE html>
<html>
<head>
<title>Textbox Tab Forward Exampletitle>
<script type="text/javascript" src="EventUtil.js">script>
head>
<body>
<form method="post" action="http://www.nczonline.net">
<p>Enter your telephone number:p>
<input type="text" name="tel1" id="txtTel1" size="3" maxlength="3" >
<input type="text" name="tel2" id="txtTel2" size="3" maxlength="3" >
<input type="text" name="tel3" id="txtTel3" size="4" maxlength="4" >
<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>