1. 程式人生 > >Enter鍵表單自動提交問題

Enter鍵表單自動提交問題

       最近做了一個系統,重新搭建了前端,採用jquery validate外掛做表單驗證。一切都進行的非常順利。可是噁心的事情發生了,為了配套校驗機制,在彈出框的搜尋條件頁,也用了form標籤,僅僅是為了表單驗證方便。但是當只有一個查詢條件(text文字輸入框)的時候,卻發現只要輸入條件按enter鍵,頁面立馬就跳轉了,而且跳轉的路徑很奇怪,然後就出現404錯誤。

       憑藉直覺,不用說,就是enter鍵觸發了表單提交。但是當前業務這樣的表單,只是方便做校驗,並非要與後臺通訊的。一番搜尋,問題如下:

出現自動提交的情況,有兩種可能:
一 、編寫了javascript程式碼,當用戶點按Enter鍵時,通過js事件偵聽機制觸發表單的提交。
二 、利用了瀏覽器的預設行為(至少發現ie是這樣的)。瀏覽器在解析網頁的時候,有許多預設的行為,例如如果一個頁面上有表單和一個提交按鈕,那麼開啟頁面時,焦點會自動落在這個提交按鈕上面。同樣如果一個表單中只有一個單行文字輸入域(text),那麼在這個輸入域中按Enter鍵時,瀏覽器會自動提交該表單。


我們對於第一種情況一般都知道而且很容易理解,但是對於第二種瀏覽器的預設行為,可能知道這一點的人就比較少了,下面我具體看一下瀏覽器(至少ie如此)在表單提交上的預設行為。
如果表單中含有一個單行文字輸入域,那麼無論含有多少其他型別的表單元件,那麼在該輸入域中點選Enter時,表單會自動提交。例如下面的程式碼:

<form action="" method="post">
     <input type="text"  name="sdfsdf"  />
      <textarea</textarea>
      <input type="checkbox"  name='' />
      <input type="hidden"name="aa" value=''  />
</form


解決的辦法很簡單,只要再新增一個文字輸入框就可以了,可能你會說,為了不自動提交就要增加一個沒有用的輸入框,而且中含有兩個輸入框終端使用者會接受嗎? 其實可以解決,你可以將那個新新增的輸入框通過style 隱藏即可,例如:

<form action="" method="post">
    <input type="text" name="notautosubmit"  style="display:none"/>
    <input type="text" name="username"/>
</form>

 
還有一個方法可以監聽鍵盤按鍵,如果是keyCode=13,則選擇性過濾事件的響應即可。

document.onkeypress = function(){
    if(event.keyCode == 13) 
   {
         return  false;
   }
}