隱藏 <a> 和 BUTTON 的焦點虛線框

默認情況下, 在按下 <A/> 和 <BUTTON/> IE 和 FF 都會出現虛線框
可有很多時候, 這影響了我們頁面的統一風格, 所以, 我們要把這虛線框去掉...

也許, 有很多人都在用 this.blur(), 來讓對象失去焦點:

<a href="#" onclick="this.blur(); return false;" /> //注:href有值, onclick不要return false, 否則鏈接可能會無效


很明顯, 這是治標不治本的方法, 其實IE和FF下都有控制焦點線框樣式的方法

IE下: 在元素標簽中添加 hidefocus 屬性
FF下: <a/> 標簽可以通過 CSS2.0 規范樣式屬性 outline 來設定線框樣式
<button/> 沒有outline樣式, 但是可以通過 ::-moz-focus-inner (FF私有偽類, 注意是兩個冒號) 來設定線框樣式

如, 要在IE和FF下隱藏線框, 可如此

代碼
<style type="text/css" >
a.hidefocus { outline: none; } //無輪廓
button.hidefocus::-moz-focus-inner { border:none; } //::-moz-focus-inner無邊框
</style>

<a herf="#" class="hidefocus" hidefocus >點擊我無虛線</a> //hidefocus IE下的元素屬性
<button class="hidefocus" hidefocus >點擊我無虛線哦</button>

如果頁面中的<a/>非常多, 一個一個地加上 hidefocus[=true]也許會很麻煩,
所以, 頁面加載完成后,可以用js來添加這一屬性(使用jquery的頁面, 更是容易按需取到要設置隱藏的元素對象)

代碼
window.onload = function(){
// something to do on window loaded
hideFocusWithButtons();
}
function hideFocusWithButtons(){
var buttons = document.getElementsByTagName('button');
for(var i=0,l=buttons.length; i<l; i++){
buttons[i].setAttribute('hidefocus',true); //取消隱藏虛線, 把 hidefocus 設為 false 即可
}
}