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