回車鍵觸發表單提交的問題

DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 回車鍵觸發表單提交的問題

回車鍵觸發表單提交的問題

編輯：關於網頁技巧

我們有時候希望回車鍵敲在文本框（input element）裡來提交表單（form），但有時候又不希望如此。比如搜索行為，希望輸入完關鍵詞之後直接按回車鍵立即提交表單，而有些復雜表單，可能要避免回車鍵誤操作在未完成表單填寫的時候就觸發了表單提交。

要控制這些行為，不需要借助JS，浏覽器已經幫我們做了這些處理，這裡總結幾條規則：

如果表單裡有一個type=”submit”的按鈕，回車鍵生效。
如果表單裡只有一個type=”text”的input，不管按鈕是什麼type，回車鍵生效。
如果按鈕不是用input，而是用button，並且沒有加type，IE下默認為type=button，FX默認為type=submit。
其他表單元素如textarea、select不影響，radio checkbox不影響觸發規則，但本身在FX下會響應回車鍵，在IE下不響應。
type=”image”的input，效果等同於type=”submit”，不知道為什麼會設計這樣一種type，不推薦使用，應該用CSS添加背景圖合適些。

實際應用的時候，要讓表單響應回車鍵很容易，保證表單裡有個type=”submit”的按鈕就行。而當只有一個文本框又不希望響應回車鍵怎麼辦呢？我的方法有點別扭，就是再寫一個無意義的文本框，隱藏起來。根據第3條規則，我們在用button的時候，盡量顯式聲明type以使浏覽器表現一致。

做了一個DEMO 列出了一些例子。

運行代碼框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <title>submit</title> </head> <body> <h1>本demo演示在文本框中按enter鍵是否觸發提交表單</h1> <h2>默認情況下，一個文本框的時候，提交，不管按鈕type是submit還是button</h2> <form action="http://www.koubei.com"> <input type="text"> <input type="button" value="提交"> </form> <h2>一個文本框的時候怎麼才能做到不提交，方法是加一個隱藏掉的文本框</h2> <form action="http://www.koubei.com"> <input type="text"> <input type="text" style="display:none"> <input type="button" value="提交"> </form> <h2>只要有type為submit的按鈕存在，一個文本框還是多個文本框都提交</h2> <form action="http://www.koubei.com"> <input type="text"> <input type="submit" value="提交"> </form> <h2>只要有type為submit的按鈕存在，一個文本框還是多個文本框都提交</h2> <form action="http://www.koubei.com"> <input type="text"> <input type="text"> <input type="submit" value="提交"> </form> <h2>多個文本框的時候，不提交，用type為button的按鈕就行啦</h2> <form action="http://www.koubei.com"> <input type="text"> <input type="text"> <input type="button" value="提交"> </form> <h2>用button元素時，FX和IE下有不同的表現</h2> <form action="http://www.koubei.com"> <input type="text"> <input type="text"> <button>提交</button> </form> <h2>radio和checkbox在FX下也會觸發提交表單，在IE下不會</h2> <form action="http://www.koubei.com"> <input type="text"> <input type="radio" name="a"> <input type="checkbox" name="b"> <input type="checkbox&q</p><b>12下一頁 </b>

關於網頁技巧

網頁設計實例:兒童網站視覺結構布局設計分析: 一、溫馨而柔和相關地址：http://www.web-designers.cn/post.aspx?
用戶體驗設計:用戶注冊流程設計方法: 網頁制作poluoluo文章簡介：It’s All About Conversion – 如何設計用
五個設計技巧，開拓你的設計視野: 網頁制作poluoluo文章簡介：當你在設計時手頭上有三張照片，你會如何處理？你會將這三張照片都用上

前端技巧關於網頁技巧 WEB前端代碼網頁特效代碼

DIV CSS 佈局教程網

相關文章