DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> 禁止按回車鍵提交表單的方法
禁止按回車鍵提交表單的方法
編輯:JavaScript綜合知識     

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

一是編寫了javascript代碼,當用戶點按Enter鍵時,通過js事件偵聽機制觸發表單的提交。

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

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

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

例如下面的代碼:

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

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

1 2 3 4 5 <form action="" method="post" <input type="text" name="sdfsdf"/ <input type="text" name="sddf"/</form

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

1 2 3 4 5 <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事件:<form name="searchfrom"

最終解決方案:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <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>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved