表單自動提交問題整理


表單自動提交問題

問題描述

二是利用了瀏覽器的默認行為(至少發現ie是這樣的)。瀏覽器在解析網頁的時候,有許多默認的行為,例如: * 如果一個頁面上有表單和一個提交按鈕,那么打開頁面時,焦點會自動落在這個提交按鈕上面。 * 同樣如果一個表單中只有一個單行文本輸入域(text),那么在這個輸入域中按Enter鍵時,瀏覽器會自動提交該表單。 我們對於第一種情況一般都知道而且很容易理解,但是對於第二種瀏覽器的默認行為,可能知道這一點的人就比較少了,下面我具體看一下瀏覽器(至少ie如此)在表單提交上的默認行為。 如果表單中含有一個單行文本輸入域,那么無論含有多少其他類型的表單組件,那么在該輸入域中點擊Enter時,表單會自動提交。例如下面的代碼: <form action="" method="post"> <input type="text" name="sdfsdf"/> <textarea</textarea> <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事件:

 

注意:1、form自動提交,input最好不要有value=""配置(有次設置時焦點在input上時點擊enter表單會自動提交)。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM