最简单易懂不复杂的js实现enter键tab功能

最简单易懂不复杂的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>&nbsp;&nbsp;密码:</td><td><input name="psd" type="text" value=""  id="psd" "back_text(event)"/></td></tr>
	</table>
	<input name="sub"  type="submit"  value="&#8730;&nbsp;确定" />
</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()函数,所以如果这个函数有其他的操作(比如验证等)的话,要注意一下使用就好了。

上一篇:docker(5)docker运行web应用


下一篇:数据结构和算法(十 六): 查找(B,散列表)