最简单易懂不复杂的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()函数，所以如果这个函数有其他的操作(比如验证等)的话，要注意一下使用就好了。

标签：文本框,js,按下,user,tab,enter,var,keynum
来源： https://blog.csdn.net/qq_38871652/article/details/89001257