MSIE: Form-Enter-To-Submit
作為Web Developer,support幾個Browser這些基本要求就不用說了。不過相信各位都很有同感的是,MSIE(尤其IE6)是一樣乞人憎的東西,真是WTF…
JavaScript、CSS就不用說了,近來遇到了Form-Enter-To-Submit的問題,還真是慨歎一句MSIE奇哉怪也。
Form-Enter-To-Submit,簡單點說就是在一張Form內的Text Field或Password Field按Enter來作Form Submit。如果Form內有幾個Submit Element的話(<input type="submit"/>或<input type="image"/>),一般Browser是會選擇Form內第一個Submit Element作Submit的。因此,假如要設定一個Default Submit Action的話,只需要很爛的簡簡單單放一個Hidden的Default Submit Element在Form內開頭的位置就好。
可是遇到我們偉大的MSIE就沒辦法了。經過細心測試,發現MSIE的Form-Enter-To-Submit有如此的情況︰
- Form內只有一個Text/Password Field,不會把Submit Element Submit上去。
- Submit Element不是User肉眼可見的,如加上
display: none、overflow: hidden、visibility: hidden;甚至乎用position放到頁面以外的,鐵定不會Submit上去。(值得一提是Submit Element假如沒有高度及闊度,以及用一些iehacks的方法都算是「肉眼可見」的,不過有些Browser不支援這些東西,結果只會更煩而已) - Submit Element在Load Time不存在的(即後來用JavaScript加上去),不會Submit上去。
那麼何時會才把Submit Element Submit上去呢?如果有幾個Submit Element又會把哪個Submit上去呢?結論是︰
- 當Form內有兩個或以上Text/Password Field,MSIE會把第一個Load Time存在而肉眼可見的Submit Element Submit上去。(說完也不知自己在說甚麼)
如果要硬來的話又怎麼辦?以下是我這個豬腦想出來的方法︰
- Form內只有一個Text/Password Field,Submit Element只有一個︰加個無用的隱藏Text Field(不建議,好核突),又或者加個跟Submit Element的Name及Value一樣的Hidden Field就可以。
- Form內只有一個Text/Password Field,Submit Element有幾個︰千萬不要用剛才加Hidden Field的那招,會令所有Submit都變成Default Submit Action的。唯有加個好核突的隱藏Text Field算了。
- Submit Element有幾個,但Default Submit Element卻不是第一個︰只好將Default Submit Element強放做第一個,然後用CSS作排位。
以上解決方法都十分爛,沒法子,Frontend不是我專長…歡迎意見。
