首頁 > web前端 > js教程 > 禁止按下回車鍵提交表單的方法_javascript技巧

禁止按下回車鍵提交表單的方法_javascript技巧

WBOY
發布: 2016-05-16 15:55:48
原創
1717 人瀏覽過

出現自動提交的情況,有兩種可能:

一是編寫了javascript程式碼,當使用者點按Enter鍵時,透過js事件偵聽機制觸發表單的提交。

二是利用了瀏覽器的預設行為(至少發現ie是這樣的)。瀏覽器在解析網頁的時候,有許多預設的行為,例如如果一個頁面上有表單和一個提交按鈕,那麼打開頁面時,焦點會自動落在這個提交按鈕上面。同樣如果一個表單中只有一個單行文字輸入域(text),那麼在這個輸入域中按Enter鍵時,瀏覽器會自動提交該表單。

我們對於第一種情況一般都知道而且很容易理解,但是對於第二種瀏覽器的預設行為,可能知道這一點的人就比較少了,下面我具體看一下瀏覽器(至少ie如此)在表單提交上的預設行為。

如果表單中含有一個單行文字輸入域,那麼無論含有多少其他類型的表單元件,那麼在該輸入域中點擊Enter時,表單會自動提交。

例如下面的程式碼:

<form action="" method="post">
<input type="text" name="sdfsdf"/>
<input type="checkbox">sdfsdf
<input type="hidden"name="aa"/></form>
登入後複製

如果表單中含有兩個或多個單行文字輸入域,那麼無論是否含有其他類型的表單元件,按下Enter鍵時不會自動提交,例如:

<form action="" method="post"
<input type="text"
name="sdfsdf"/
<input type="text"
name="sddf"/</form
登入後複製

辦法很簡單,我們上面舉的例子中已經有了,只要再添加一個文本輸入框就可以了,可能你會說,為了不自動提交就要增加一個沒有用的輸入框,而且中含有兩個輸入框最終用戶會接受嗎?其實可以解決,你可以將那個新加入的輸入框透過style隱藏即可,例如:

<form action="" method="post"
<input type="text" name="notautosubmit"
style="display:none"/
<input type="text"
name="username"/</form
登入後複製

還有一個方法可以綁定button按鈕 enter觸發事件:
document.onkeypress = function(){
if(event.keyCode == 13) {search();returnfalse;}}其中search方法為onclick事件:

最終解決方案:

<script language="javascript"> 
  function defineSubmit(btn) 
  { 
    if("submit1" == btn.value) 
    { 
      document.testForm.action="firstAction"; 
    } 
    else 
    { 
      document.testForm.action="secondAction"; 
    } 
     
    document.testForm.submit(); 
  } 
</script> 
<form name="testForm" method="post"> 
    username:<input type="text" name="username"/> 
    password:<input type="password" name="password"/> 
    <input type="button" name="submitName" onclick="defineSubmit(this)" value="submit1"/> 
    <input type="button" name="submitName" onclick="defineSubmit(this)" value="submit2"/> 
</form> 
登入後複製

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板