按下enter键后表单自动提交问题

   在HTML的form表单里，按下enter键之后，默认情况下表单会自动提交。

 

   在公司一个项目里，按下enter键自动提交表单的查询结果与按下搜索框的搜索结果页面显示不一样，按下搜索按钮之后是通过Ajax请求返回结果；而按下enter键是直接post请求然后跳转返回一个页面，失去了页面样式及导航等。

 

   一开以为是写了js代码导致按下enter键之后会触发表单提交，后来把js代码全部移除也是一样地按下enter键会触发表单提交。到网上搜索发现是因为默认情况下在form表单内按下enter键会触发表单自动提交。有时这并不是好事，因为按下enter键自动提交是直接通过post请求发出的，然后返回一个结果页面，页面会刷新跳转，而万一我需要通过Ajax异步方式发送请求时，若不更改代码则会出现按enter键请求返回的页面与按下提交按钮后执行js代码通过Ajax异步请求获得的结果不一致的情况。

   解决方法有三：

   1、最简单高效的方法是在表单里加上

<input style="display:none;"/> 

 

 这样一行代码，这样按下enter键后就表单就不会自动提交了。

 2、监听keypress事件，当keycode是13，即按下enter键时，调用 preventDefault() 阻止事件传播

    $("#keyword").on("keypress", function(evt) {//keydown 与keypress事件在这里显示出不同了
        var keynum=0;
        if(window.event) // IE
        {
            keynum = evt.keyCode;
        }
        else if(evt.which) // Netscape/Firefox/Opera
        {
            keynum = evt.which;
        }
    //    alert (keynum);
        if (keynum == 13) {
            ftiaoPageUtils.toPage(1);
            var e = evt ? evt : window.event;
            if (window.event) {
//                由于HTML中的对象都是层次结构，比如一个Table包含了多个TR，一个TR包含了多个TD 
//                Bubble就是一个事件可以从子节点向父节点传递，比如鼠标点击了一个TD，当前的event.srcElement就是这个TD，但是这种冒 泡机制使你可以从TR或者Table处截获这个点击事件，但是如果你event.cancelBubble，则就不能上传事件。
                e.cancelBubble=true;
            } else {
//                该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。
//                e.stopPropagation();
                e.preventDefault();
            }
        }
    });

View Code

 

 

 

3、使用如下代码：

<script type="text/javascript" src="./js/common/jquery-1.11.1.min.js"></script>
<script language="javascript" type="text/javascript"><!--
    //禁用Enter键表单自动提交
        $("#keyword").on("keydown", 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>

View Code

 

参考：http://blog.csdn.net/chjttony/article/details/5885471

转载于:https://www.cnblogs.com/xunux/p/3809671.html