快捷導(dǎo)航

禁止按回車鍵提交表單的方法

更新時(shí)間：2015年06月11日 12:10:48 投稿：hebedich

這篇文章主要介紹了禁止按回車鍵提交表單的方法的相關(guān)資料,需要的朋友可以參考下

出現(xiàn)自動(dòng)提交的情況，有兩種可能：

一是編寫了javascript代碼，當(dāng)用戶點(diǎn)按Enter鍵時(shí)，通過js事件偵聽機(jī)制觸發(fā)表單的提交。

二是利用了瀏覽器的默認(rèn)行為（至少發(fā)現(xiàn)ie是這樣的）。瀏覽器在解析網(wǎng)頁的時(shí)候，有許多默認(rèn)的行為，例如如果一個(gè)頁面上有表單和一個(gè)提交按鈕，那么打開頁面時(shí)，焦點(diǎn)會(huì)自動(dòng)落在這個(gè)提交按鈕上面。同樣如果一個(gè)表單中只有一個(gè)單行文本輸入域（text），那么在這個(gè)輸入域中按Enter鍵時(shí)，瀏覽器會(huì)自動(dòng)提交該表單。

我們對(duì)于第一種情況一般都知道而且很容易理解，但是對(duì)于第二種瀏覽器的默認(rèn)行為，可能知道這一點(diǎn)的人就比較少了，下面我具體看一下瀏覽器（至少ie如此）在表單提交上的默認(rèn)行為。

如果表單中含有一個(gè)單行文本輸入域，那么無論含有多少其他類型的表單組件，那么在該輸入域中點(diǎn)擊Enter時(shí)，表單會(huì)自動(dòng)提交。

例如下面的代碼：

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

如果表單中含有兩個(gè)或多個(gè)單行文本輸入域，那么無論是否含有其他類型的表單組件，按Enter鍵時(shí)不會(huì)自動(dòng)提交，例如：

<form action="" method="post"
<input type="text"
name="sdfsdf"/
<input type="text"
name="sddf"/</form

辦法很簡單，我們上面舉的例子中已經(jīng)有了，只要再添加一個(gè)文本輸入框就可以了，可能你會(huì)說，為了不自動(dòng)提交就要增加一個(gè)沒有用的輸入框，而且中含有兩個(gè)輸入框最終用戶會(huì)接受嗎？其實(shí)可以解決，你可以將那個(gè)新添加的輸入框通過style隱藏即可，例如：

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

還有一個(gè)方法可以綁定button按鈕 enter觸發(fā)事件：
document.onkeypress = function(){
if(event.keyCode == 13) {search();returnfalse;}}其中search方法是onclick事件：<form name="searchfrom"

最終解決方案：

<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>

您可能感興趣的文章: