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!

Post a comment