禁止回车提交表单

一般浏览器都提供了回车键提交表单功能,这样带来了不少便利。但是有时候,你的业务场景又不需要回车提交表单功能,因为这样会影响你已有的业务逻辑。

禁止回车提交 form 表单的方法:

  1. 解决单个输入框的回车即提交问题,可以增加一个隐藏的input="text" display='none'; 然后 type 类型为 button 。
  2. 在 form 表单或 input 中加入:onkeydown="if(event.keyCode==13){return false;}"

当然,如果你需要在所有提交表单的页面都禁止回车提交表单,那么可以封装成一个单独的js文件,引入即可。代码如下:

<script>
//禁用Enter键表单自动提交          
document.onkeydown = function (event) {
    var target, code, tag;
    if (!event) {
        event = window.event;
        //针对ie浏览器                  
        target = event.srcElement;
        code = event.keyCode;
        if (code == 13) {
            tag = target.tagName;
            if (tag == "TEXTAREA") {
                return true;
            } else {
                return false;
            }
        }
    } else {
        target = event.target;
        //针对遵循w3c标准的浏览器,如Firefox                  
        code = event.keyCode;
        if (code == 13) {
            tag = target.tagName;
            if (tag == "INPUT") {
                return false;
            } else {
                return true;
            }
        }
    }
}; 
</script>

见此 demo

参考

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 我们有时候希望回车键敲在文本框(input element)里来提交表单(form),但有时候又不希望如此。比如搜...
    妖姬002阅读 3,057评论 0 1
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 4,119评论 0 0
  • oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 ...
    逍遥至尊灬寳阅读 1,263评论 0 43
  • 纳兰回评(相识) 此后的几天,就不停地回复,回复。楼层越来越高,生怕塌了。(那时候我的名字是来栖川) [2楼] 网...
    梅凉阅读 438评论 0 1
  • 我相信人类是自私的。為自己而活,比起為他人而活似乎显得有点自私。很多人一句为他人,显得自己更加高尚。或许人们享受这...
    北溟雨阅读 264评论 0 0