jquery实现达到文本框的最大长度时跳到下一个文本框

来源：互联网发布：安徽省大数据比赛编辑：程序博客网时间：2024/05/22 02:25

看w3school中的例子，觉得用jquery好像实现起来更简单，试着改写了一下，ok。

下面是w3school中的例子。

<html><head><script type="text/javascript">function checkLen(x,y){if (y.length==x.maxLength){var next=x.tabIndexif (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" onkeyup="checkLen(this,this.value)"><input size="2" tabindex="2" maxlength="2" onkeyup="checkLen(this,this.value)"><input size="3" tabindex="3" maxlength="3" onkeyup="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>