關於回車鍵提交表單

最近因爲要整理網站的js,發現js方法,按下回車鍵然後提交的函數沒有地方調用,那原來表單是怎樣通過回車鍵就可以提交的。

百度了下,原來是瀏覽器對submit自己的觸動機制

如下是別人的文章總結:http://hi.baidu.com/imjunjie/item/36d6afcaff85e73d449416a3

----------------------------

通過回車進行提交表單,可以在用戶輸入完畢後直接進行回車查詢操作,不用點擊鼠標,在某些場景應用下非常方便,用戶體驗較好。

總結&科普一下:

1、如果form裏面只有一個input type=text,那麼無論有沒有submit按鈕,在input中回車都會提交表單。如果不想回車提交,需要再加一個input type=text,然後設置display:none.

2、如果form裏面多於一個input type=text,那麼必須有一個submit按鈕纔可以回車提交表單。
按鈕可以是input也可以是button,他們應設置type=submit。如果只寫button而不寫type,那麼IE下type=button,FF下則是type=submit。

3、如果form裏面多於一個input type=text,並想實現回車提交表單,又不想在頁面中出現原生的submit按鈕。比如:你想通過一個帶hover的圖片連接,並通過js腳本來實現華麗的驗證及表單提交……

可以加上一個input type=submit 並設置display:none在form裏——但是!這僅僅對FF等有效。在IE下就會非常悲劇……如果希望IE生效,需要做以下的事情:

<input type="submit" style="display:block;overflow:hidden;width:0px;height:0px;position:absolute">

還嘗試了其他很多方法,均無效。比如:
將input的顏色、邊框、背景都設置爲#FFF,在IE下會出現噁心的焦點框……
設置input的透明度……
設置input的visablity……
將input移到頁面外面可見區域之外……
將input藏在某個object下面……
還能在trick點麼……

最後一個問題:

爲什麼非要費勁的用form的默認回車提交,而不在input中監聽keydown事件,等到code=13時使用javascirpt調用form對象的submit()方法?

前提如果你的form targtet!=_blank,那麼你可以實現你想要的。
但是一旦target=_blank,根據我的實踐,在keydown事件中進行submit到_blank
—— 這個新窗口定會被IE給block掉……(順便提一下,如果是在click事件裏調用form的submit方法,無論是本窗口還是新窗口,在IE中都不會被block,懷疑是IE的防彈窗廣告策略)

這,也就是我寫這篇文章的意義:
回車提交查詢、新窗口、多input text、不出現原生的button。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章