按下enter鍵後表單自動認可問題

標籤：style   class   blog   code   http   java   

   在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