按回车键不提交表单，绑定其他事件

一般按enter键，提交表单。此代码主要实现按enter键不提交表单，而是触发另外的事件。

CSS样式：

* {
	margin:0;
	padding:0;
	font-size:12px;
}
#main {
	960px;
	height:600px;
	background:lightblue;
	margin:0 auto;
	padding-top:30px;
	padding-left:30px;
}
#content {
	background:#fff;
	500px;
	height:500px;
	padding:30px 0 0 30px;
}
#content form p {
	height:30px;
	margin-top:20px;
	}
#content form p span {
	color:red;
	padding:3px;
}
#content form p strong {
	display:inline-block;
	font-size:16px;
	text-align:right;
	font-weight:100;
	100px;
	line-height:150%;
}
input.inp {
	240px;
	height:35px;
	font-size:20px;
	border:1px solid #eee;
	}
input.sub {
	100px;
	height:30px;
	border:none;
	margin-left:37px;
	margin-top:10px;
	cursor:pointer;
	background:#666;
	font-size:16px;
	font-weight:bold;
	color:#fff;
	}
input#but {
    100px;
	height:30px;
	border:none;
	margin-left:105px;
	margin-top:10px;
	cursor:pointer;
	background:#666;
	font-size:16px;
	font-weight:bold;
	color:#fff;
}

HTML和JS代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>表单验证JS效果</title>
<script type="text/javascript">
	function check(){
	var val=document.myform.email.value;   //取得输入的邮箱值
	if(val==""){                           //输入邮箱为空
		alert("请输入邮箱！");
		return false;
		}
	else {                                  //邮箱中有内容，进行正则匹配   
		var emailpreg="^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$";  //正则匹配表达式
		var preg=new RegExp(emailpreg);
		if(val.match(preg)==null){       //匹配不成功
			alert(val+"\n"+"输入的邮箱格式不正确！");
			return false;
			}
		}
	var pwdval=document.myform.pwd.value;  //取得密码输入框中的值
	if(pwdval==""){                        //密码框中为空 
		alert("输入密码"); 
		return false;
		}
	 if(pwdval.length>20){                  //密码框中内容太长
	   alert("密码长度太长，密码长度必须少于20");
	   return false;
		 }
	 var nameval=document.myform.uname.value;   //取得昵称框中的值
	 if(nameval==""){                        //昵称框中为空 
		alert("输入昵称"); 
		return false;
		}
	 if(nameval.length>10){                  //昵称框中内容太长
	   alert("昵称长度太长，昵称长度必须少于10");
	   return false;
		 }
	}
if(document.attachEvent){  
     document.attachEvent("onkeydown",function(e){  
        if(e.keyCode == 13)  
        alert("a");
    });  
}  
else {  
    document.addEventListener("keydown",function(e){  
        if(e.keyCode == 13)  
        document.getElementById("but").click();
    });  
}  	
</script>
</head>

<body>
<div id="main">
  <div id="content">
  <form name="myform" action="" method="post" onkeydown="if(event.keyCode==13){return false;}">
    <p><strong><span>*</span>我的邮箱</strong>
      <input class="inp" type="text" name="email" />
    </p>
    <p><strong><span>*</span>创建密码</strong>
      <input class="inp"  type="password" name="pwd"/>
    </p>
    <p><strong><span>*</span>昵称</strong>
      <input class="inp"  type="text" name="uname" />
    </p>
    <p>
	  <input type="button" id="but" value="not agree" onclick="location.href='http://www.baidu.com'"/>
      <input class="sub"  type="submit" value="sub" onclick="check();"/>
    </p>
    </form>
  </div>
</div>
</body>
</html>

代码解析：

first：

上面红色标记的代码是实现按enter键不提交表单。

second:

if(document.attachEvent){
document.attachEvent("onkeydown",function(e){
if(e.keyCode == 13)
alert("a");
});
}
else {
document.addEventListener("keydown",function(e){
if(e.keyCode == 13)
document.getElementById("but").click();
});
}

上面标记的代码是实现按enter键触发其他事件，也就是跳转。