技術(shù)資訊
回車(chē)鍵觸發(fā)表單提交的問(wèn)題
2009-02-12 08:58:00
我們有時(shí)候希望回車(chē)鍵敲在文本框（input element）里來(lái)提交表單（form），但有時(shí)候又不希望如此。比如搜索行為，希望輸入完關(guān)鍵詞之后直接按回車(chē)鍵立即提交表單，而有些復(fù)雜表單，可能要避免回車(chē)鍵誤操作在未完成表單填寫(xiě)的時(shí)候就觸發(fā)了表單提交。
要控制這些行為，不需要借助JS，瀏覽器已經(jīng)幫我們做了這些處理，這里總結(jié)幾條規(guī)則：
- 如果表單里有一個(gè)type=”submit”的按鈕，回車(chē)鍵生效。
- 如果表單里只有一個(gè)type=”text”的input，不管按鈕是什么type，回車(chē)鍵生效。
- 如果按鈕不是用input，而是用button，并且沒(méi)有加type，IE下默認(rèn)為type=button，F(xiàn)X默認(rèn)為type=submit。
- 其他表單元素如textarea、select不影響，radio checkbox不影響觸發(fā)規(guī)則，但本身在FX下會(huì)響應(yīng)回車(chē)鍵，在IE下不響應(yīng)。
- type=”image”的input，效果等同于type=”submit”，不知道為什么會(huì)設(shè)計(jì)這樣一種type，不推薦使用，應(yīng)該用CSS添加背景圖合適些。
實(shí)際應(yīng)用的時(shí)候，要讓表單響應(yīng)回車(chē)鍵很容易，保證表單里有個(gè)type=”submit”的按鈕就行。而當(dāng)只有一個(gè)文本框又不希望響應(yīng)回車(chē)鍵怎么辦呢？我的方法有點(diǎn)別扭，就是再寫(xiě)一個(gè)無(wú)意義的文本框，隱藏起來(lái)。根據(jù)第3條規(guī)則，我們?cè)谟胋utton的時(shí)候，盡量顯式聲明type以使瀏覽器表現(xiàn)一致。
做了一個(gè) demo(點(diǎn)擊查看) 列出了一些例子。
原文：http://ued.koubei.com/?p=835
近期更新
- [2023-07-26 14:17:28] 為品牌賦能，海外官網(wǎng)品牌數(shù)字化
- [2023-05-06 10:32:26] 青島網(wǎng)站建設(shè)公司,高端網(wǎng)站定制,一站式網(wǎng)站服務(wù)——力圖數(shù)字科技
- [2023-04-27 13:47:54] 高端定制網(wǎng)站建設(shè)——從滿足預(yù)期到走向卓越
- [2023-04-11 09:17:49] H5頁(yè)面設(shè)計(jì)開(kāi)發(fā)——移動(dòng)端傳播利器
- [2022-11-16 10:11:43] windows2012程序在哪
- [2022-04-14 11:01:47] 力圖數(shù)字科技配套網(wǎng)站服務(wù)支持
- [2021-05-18 10:14:11] 青島網(wǎng)站建設(shè)的流程
- [2021-04-29 10:14:38] 企業(yè)定制化官網(wǎng)建設(shè)項(xiàng)目
- [2021-03-05 10:34:45] 移動(dòng)互聯(lián)時(shí)代房地產(chǎn)行業(yè)的微信小程序解決方案
- [2021-01-22 17:29:38] 微信小程序有哪些優(yōu)勢(shì)？為什么要開(kāi)發(fā)微信小程序？
- [2021-01-08 17:28:04] 網(wǎng)站建設(shè)最容易忽略的人性化設(shè)計(jì)
- [2020-12-16 16:55:32] 建設(shè)一個(gè)常規(guī)的公司網(wǎng)站建設(shè)成本大概是多少？
延伸閱讀
- [2008-11-20 12:01:00] 網(wǎng)站的表單設(shè)計(jì)要點(diǎn)
- [2008-10-31 11:24:00] web表單按鈕的使用
- [2011-11-14 17:38:57] 如何設(shè)計(jì)好網(wǎng)頁(yè)表單的細(xì)節(jié)
- [2008-08-14 16:13:00] 注冊(cè)表單中出錯(cuò)字段排行榜
- [2009-03-03 08:51:00] 設(shè)計(jì)評(píng)論表單
- [2009-02-15 22:38:00] 表單設(shè)計(jì)中的常見(jiàn)問(wèn)題
- [2012-12-19 22:20:48] 網(wǎng)站反饋表單的用戶(hù)體驗(yàn)
- [2008-11-14 11:06:00] 表單可用性5原則
- [2012-02-21 22:36:55] 反饋表單的輸入優(yōu)化
- [2008-11-10 22:28:00] 表單中的重置與取消按鈕
- [2012-02-02 11:40:05] WEB表單設(shè)計(jì)分析及重要性
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計(jì)解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計(jì)解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 科技企業(yè)網(wǎng)站設(shè)計(jì)解決方案 電子家電網(wǎng)站設(shè)計(jì)解決方案 食品行業(yè)網(wǎng)站設(shè)計(jì)解決方案 集團(tuán)公司網(wǎng)站設(shè)計(jì)解決方案 企事業(yè)單位網(wǎng)站設(shè)計(jì)解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 健身運(yùn)動(dòng)網(wǎng)站設(shè)計(jì)解決方案 美容與化妝品網(wǎng)站設(shè)計(jì)解決方案 建筑設(shè)計(jì)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 物流行業(yè)網(wǎng)站設(shè)計(jì)解決方案
TAGS關(guān)鍵字
官網(wǎng)網(wǎng)站建設(shè) 蘋(píng)果系統(tǒng) IT資訊 青島高端網(wǎng)站建設(shè) 青島做網(wǎng)站多少錢(qián) 力圖 企業(yè)建站 青島網(wǎng)站建設(shè)公司哪家好 robots 營(yíng)銷(xiāo)型網(wǎng)站建設(shè) 響應(yīng)式設(shè)計(jì) H5專(zhuān)題頁(yè)面 青島網(wǎng)頁(yè)設(shè)計(jì) 空白和簡(jiǎn)潔的設(shè)計(jì) 交互設(shè)計(jì) 扁平化設(shè)計(jì) 審美 html和css 青島網(wǎng)站設(shè)計(jì)哪家好 企業(yè)網(wǎng)站設(shè)計(jì) 微信開(kāi)發(fā) 企業(yè)網(wǎng)站建設(shè) 網(wǎng)站交互設(shè)計(jì) 青島網(wǎng)站建設(shè) 搜索引擎 插畫(huà) 海信網(wǎng)絡(luò)科技 輪胎網(wǎng)站設(shè)計(jì) HTML5 營(yíng)銷(xiāo)策略
