隐藏 <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 即可
}
}