KB-難以理解的Disabled Span行為
| | 2 | | ![]() |
1: <html><body>
2: <form method="POST">
3: <span disabled="disabled">
4: <input name="x" type="text">
5: <input type="button" onclick="alert('Yo!');" value="Yo">
6: </span>
7: <input type="submit" value="Submit">
8: </form>
9: </body></html>
以上這段HTML Code, 看來十分平常,但卻隱藏著殺機...
注意到span上的宣告disabled=disabled了嗎? 設定disabled屬性後,span內部的Input都會變成灰色,感覺上被disable了。但是!!! input type="text"可以繼續輸入,button的onclick也會照樣被觸發。
所以一切都是幻覺,嚇不倒我??
又錯了! 雖然input可輸入,button onclick會觸發,但是Submit時,被包在disabled span中的form element都會被忽略,後端是接不到的。
這兩個矛盾的行為,讓我搞不清楚被包在disabled span中的form element究竟算不算被disabled?從HTML client的角度來說不是(因為可以操作,只是變灰),從Server的角度來說是(因為不會被submit)。
結論是,大家如果發現資料沒被Submit時,不妨檢查一下是否外層的element被disabled了,例如這篇文章(回應中有人可是耗了好幾個小時在上面呢)。
PS: 另外做了個測試,span disbled在Firefox上完全不管用,不會產生灰色效果,也不會阻擋Submit,會有跨瀏覽器的問題。
Comments
# by 阿忠
所以被包在disabled span裡的input 的 onclick 一樣會有效摟?
# by Jeffrey
to 阿忠,依IE11/Chrome/FF的實測結果(http://jsbin.com/vuvob/1),Yes!