您的位置：首页 > Web前端 > JavaScript

JavaScript学习笔记4--模拟输入注册码时的自动切换字段

2007-08-19 13:17 330 查看

有时候某个文本框只允许输入指定数量的字符串，这时我们如果能让它直接切换到下一个字段，
会比较有意思。我们在输入软件注册码的时候，就常使用这个功能。现在我们就来做个模拟输
入注册码时自动切换字段的功能，用JavaScript实现。看下面的例子：

<html>
<head>
<title>Auto goto next</title>
<script type="text/javascript">
//函数tabForward(oTextbox)用来实现切换字段的功能，oTextbox代表文本输入框对象
function tabForward(oTextbox){
var oForm=oTextbox.form;//获取文本框所在表单的引用
/*只有达到条件：当前元素不是表单最后一个元素并且当前元素中字符的个数达
到了允许的最大长度，才会去做切换字段*/
if(oForm.elements[oForm.elements.length-1]!=oTextbox
&& oTextbox.value.length==oTextbox.getAttribute("maxlength")){
for(var i=0;i<oForm.elements.length;i++){
//定位当前元素
if(oForm.elements[i]==oTextbox){
for(var j=i+1;j<oForm.elements.length;j++){
//定位下一个元素
if(oForm.elements[j].type!="hidden"){
oForm.elements[j].focus();
return;
}
}
return;
}
}
}
};
</script>
</head>
<body>
<form name="form1" onload="document.forms[0].elements[0].focus()">
请输入注册码：<br />
<input type="text" size="5" maxlength="5" onkeyup="tabForward(this)" />-
<input type="text" size="5" maxlength="5" onkeyup="tabForward(this)" />-
<input type="text" size="5" maxlength="5" onkeyup="tabForward(this)" />-
<input type="text" size="5" maxlength="5" onkeyup="tabForward(this)" />-
<input type="text" size="5" maxlength="5" onkeyup="tabForward(this)" />-
<input type="text" size="5" maxlength="5" onkeyup="tabForward(this)" />
<br /><br />
<input type="button" value="注册" />
</form>
</body>
</html>

当运行上面的示例，可以看到和平时输入注册码时一样的效果。tabForward方法必须在输入每
一个字符后调用，所以需要通过onkeyup事件的触发来调用。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航