看w3school中的例子,觉得用jquery好像实现起来更简单,试着改写了一下,ok。
下面是w3school中的例子。
<html>
<head>
<script type="text/javascript">
function checkLen(x,y)
{
if (y.length==x.maxLength)
{
var next=x.tabIndex
if (next<document.getElementById("myForm").length)
{
document.getElementById("myForm").elements[next].focus()
}
}
}
</script>
</head>
<body>
<p>这段脚本在达到文本框的最大长度时跳到下一个文本框:</p>
<form id="myForm">
<input size="3" tabindex="1" maxlength="3" οnkeyup="checkLen(this,this.value)">
<input size="2" tabindex="2" maxlength="2" οnkeyup="checkLen(this,this.value)">
<input size="3" tabindex="3" maxlength="3" οnkeyup="checkLen(this,this.value)">
</form>
</body>
</html>
下面是jquery改写的。其中$("input").keyup()是设置所有的input标签的keyup事件,也就是按钮被松开时的事件。
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").keyup(function(){
if($(this).val().length==$(this).attr("maxlength")){
$(this).next().focus();
}
});
});
</script>
</head>
<body>
<p>这段脚本在达到文本框的最大长度时跳到下一个文本框:</p>
<form id="myForm">
<input size="3" tabindex="1" maxlength="3">
<input size="2" tabindex="2" maxlength="2" >
<input size="3" tabindex="3" maxlength="3" >
</form>
</body>
</html>