focus 第二頁

:FOCUS 2

使用 javascript 模擬 :focus。由於 IE6 沒有支援 :focus，只好改用 onfocus, onblur 來模擬這個功能。下面範例還用到 className 這個特徵。 <style type='text/css'> .onit {background:blue; color: red; font-size: 120%; width: 300px } </style> <p>TEXT：<input value='滑鼠點此' onfocus='this.className="onit"' onblur='this.className=""' /> <p>BUTTON：<input type=button value='滑鼠點此' onfocus='this.className="onit"' onblur='this.className=""' /> <p>CHECKBOX：<input type=checkbox onfocus='this.className="onit"' onblur='this.className=""' /> <p>FILE：<input type=file onfocus='this.className="onit"' onblur='this.className=""' /> <p>IMAGE：<input type=image onfocus='this.className="onit"' onblur='this.className=""' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisusG9Gxvhb9HT3WDSKFsiW_cEXy1nTaztMKzvjoq8hhXesJiyqD2aABdrIwLSTjLnGQprkM3tmU7ywgAqdlWajZIDPnxLV3sDB23pJAY7xpHdoCUZ9i-tRWRnjYidYBivnoCmjxkB62yg/s200/ant.GIF" /> <p>PASSWORD：<input type=password onfocus='this.className="onit"' onblur='this.className=""' /> <p>RADIO：<input type=radio onfocus='this.className="onit"' onblur='this.className=""' /> <p>RESET：<input type=reset value='滑鼠點此' onfocus='this.className="onit"' onblur='this.className=""' /> <p>SUBMIT：<input type=submit value='滑鼠點此' onfocus='this.className="onit"' onblur='this.className=""' /> <p>ANCHOR：<a href='javascript:void(0)' onfocus='this.className="onit"' onblur='this.className=""'>滑鼠點此</a>

• IE6 以上都可以用。Firefox 除了 FILE都可以用。Safari, Chrome 有兩種情形：（一）使用滑鼠點選，只能用在 TEXT 與 PASSWORD。（二）使用 TAB 輪選，則都可以選；而 Chrome 可選 ANCHOR 元素 ，Safari 則不能。
• 在 IE6, Safari, Chrome 中，RADIO 不能用 TAB 選；Firefox 則可以。

將 :focus 狀態傳給下一個元素。下例使用 E + F 規則。 <style type='text/css'> .fcs {color:red;} .fcs:focus {background:blue} .fcs:focus + SPAN {background:white; color:red} </style> <input type=button value='OK' class=fcs /> <span>好玩遊戲，射擊遊戲，賽車遊戲。</span>

• 上例，Firefox 成功；IE6, Safari, Chrome 失敗。使用 E ~ F 規則測試，也得到相同的結果。

focus（你正在看 第二頁）

:

第一頁

第二頁