當 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 的物件，在 onfocus 及 onblur 時作我想要的動作了：
[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 們 😛