防止点击enter回车提交表单

2018-8-2 12:10| 作者: admin| 查看: 128| 评论: 0|来自: 蚂蚁部落

如果form表单获取焦点的话,点击回车键就能够提交表单,自然有方便之处,但有时候可能由于错误操作导致表单提交。

下面就通过代码实例介绍一下如何实现此功能。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title>  
<script type="text/javascript">
window.onload=function(){
  var oform=document.getElementById("theform");
  oform.onkeydown=function(ev){
    var ev=window.event||ev;
    if(ev.keyCode==13){
      return false;
    }
  }
}
</script>
</head>  
<body>  
<form id="theform" action="softwhy.com">
<input type="text">
</form>
</body>  
</html>

点击回车不会进行表单提交,原理很简单,就是首先要判断点击是否是回车键,如果是回车键,事件处理函数就会返回false,也就是return false语句,这样就可以取消默认动作,也就不会提交表单。

相关阅读:

(1).keydown事件参阅JavaScript keydown 事件一章节。 

(2).var ev=window.event||ev参阅var ev=window.event||ev一章节。 

(3).keyCode属性参阅js的键盘按键keyCode属性值对应表一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部