當 IE7 不支援 :focus 這個 CSS Selector…

所以我只好寫 JavaScript 來解決它。

當我想要為網頁上的表單欄位,在 focus 的時候作些樣式改變時,我本來在 stylesheet 裡面這樣寫(當 focus 時,邊框加粗並且變成 #fc3 的顏色):
[code lang="css"]
input:focus {
border: 2px solid #fc3;
}
[/code]
當然,這在 Firefox 裡是沒有問題的,但是 IE6, 7 就是不支援 :focus 這個 CSS Selector,所以我只好寫 JavaScript 來讓這些 input tag 的物件,在 onfocusonblur 時作我想要的動作了:

[code lang="javascript"]
// Event 是 prototype.js 提供的
function makeInputSenseFocus() {
var elems = document.getElementsByTagName('input'); // 取得 tag 為 input 的 DOM obj
for (var i = 0; i < elems.length; ++i) { // 只改變 text field 及 password field if (elems[i].type == 'text' || elems[i].type == 'password') { Event.observe(elems[i], 'focus', function(evt) { Event.element(evt).style.border = "2px solid #fc3"; }); Event.observe(elems[i], 'blur', function(evt) { Event.element(evt).style.border = "變回原狀"; }); } } } // 為了讓頁面讀取完後會執行上述 function Event.observe(window, 'load', makeInputSenseFocus); [/code] 啊~感覺好麻煩呀,不知道有沒有讓 IE7 直接支援該 CSS Selector 的方法啊~(絕望啊!我對於支援不完整的瀏覽器感到絕望啊!) UPDATE: 剛好像看到有人寫了 patch IE7 的 JavaScript 們 😛