最简单易懂不复杂的js实现enter键tab功能文本框跳转
咱们初学者在开始学js表单验证的时候可能会想研究用enter键来实现文本框的跳转,这样更为方便,但是会发现按下enter就提交表单了,这很绝望。下面是我自己研究的一点小技巧吧,感觉挺简单的,分享给大家,下面直接开始吧!
先是一个表单如下(表单看不懂就过分了啊-_-):
<form action="" method="post" name="myform" "return check()">
<table>
<tr><td>用户名:</td><td><input name="user" type="text" value="" id="user" "change_text(event)"/></tr>
<tr><td> 密码:</td><td><input name="psd" type="text" value="" id="psd" "back_text(event)"/></td></tr>
</table>
<input name="sub" type="submit" value="√ 确定" />
</form>
这里要简单说一下,经验证我们按下enter 会先引发onkeypress事件执行change_text(event)函数然后再去调用check()函数
,所以下面js代码:
var text1 = 0;//用于实现enter文本跳转的变量,如果你的文本框有点多可以用一个数组装 var textarry = new Arry(输入你的文本框个数)
var text2 = 0;
function change_text(e)
{
var keynum;
if(window.event) // IE
{
keynum = e.keyCode;
}
else if(e.which) // Netscape/Firefox/Opera
{
keynum = e.which;
}
if(keynum==13)
{
//alert("按下enter");
text1 = 1;//代表user文本框被按enter了,这样会跳到check函数的时候就知道该用Array数组的哪个元素
}
}
function back_text(e)
{
var keynum;
if(window.event) // IE
{
keynum = e.keyCode;
}
else if(e.which) // Netscape/Firefox/Opera
{
keynum = e.which;
}
if(keynum==13)
{
//alert("按下enter");
text2=1;
}
}
function check()
{
//alert("调用提交函数");
user= document.getElementById("user");
psd = document.getElementById("psd");
if(text1==1)//user文本框发出的enter
{
psd.focus();
text1=0;//变完光标以后这个标志要变回来,方便下次继续
}
if(text2==1)//psd文本框发出的enter
{
user.focus();
text2=0;
}
return false;
}
好了,就通过这样的方式搞定,但是要注意这种方法每次按下enter都会经过一次提交表单的check()函数,所以如果这个函数有其他的操作(比如验证等)的话,要注意一下使用就好了。