所以我只好寫 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 們 😛
3 comments
Comments are closed.
可以 IE7 library :
http://dean.edwards.name/IE7/
多謝告知,不過我的 UPDATE 已經有放上去啦