标签：虚线框

再谈去除获得焦点的链接虚线边框问题

今天看到淘宝UED更新了一篇文章《盲人站长深恶痛绝的onfocus=“this.blur()”》，不由得想起之前我写的《去掉网页上链接或按钮的虚线框》。感觉淘宝UED对这个问题研究还是比较深入的，比较下来，只有this.blur()属于比较暴力的消除虚线框的办法，而且在一定程度上还会导致易用性的下降，比如淘宝UED就提到了盲人易用性的问题，淘宝UED团队总结出“去除链接虚线框的推荐方法是：ie下用hidefocus属性，ff/chorme/opera/safari下用outline:none”。

问题应该很好的解决了，但是我们还是对this.blur()念念不忘，为什么呢？因为其兼容性和效果都是最好的，那有没有折中的办法，即不损失易用性（能够获得焦点）且隐藏焦点所带来的虚线框？Mike Smullin的《Removing the Dotted Outline from Focused Links》给出了个办法可以参考一下，我将其办法改成了函数如下：

1
2
3
4
5
6
7
8
9
10
11
12

function killFocus(obj) {
  obj.onmousedown = function() {
    this.blur(); // most browsers
    this.hideFocus = true; // ie
    this.style.outline = 'none'; // mozilla
  }
  obj.onmouseout = obj.onmouseup = function() {
    this.blur(); // most browsers
    this.hideFocus = false; // ie
    this.style.outline = null; // mozilla
  }
}

很明显，其通过鼠标的操作动态的设置相关的属性，也就是说当我们点击鼠标时虚线框将被隐藏掉，这不影响我们键盘按Tab键或其他办法获得焦点，当然这个只是针对鼠标操作隐藏了焦点虚线框，如果你觉得一点焦点虚线框都不能有的话，那还是按照hidefocus和outline配合使用吧。

去掉网页上链接或按钮的虚线框

经常用鼠标在链接或按钮上点击时会出现虚线框，很多朋友常常想去掉这个不雅的虚线框，但是我个人还是觉得去掉虚线框还是要谨慎为好，为什么呢，因为当你去掉虚线框后表面上确实美观了很多，用鼠标点击链接或按钮时顿觉清爽，但是这同时还带来了可访问性和易用性的下降，为什么这么说呢，因为有些童鞋习惯上用键盘快速的定位并访问相关的链接或按钮，当你去掉虚线框后，就意味着这些对象可能无法获得焦点（focus），或者浏览者可能无法感知到焦点的存在，当然也就不能被定位了。我们不能单纯的去做网站，做网页要考虑的问题很多，特别是做到无障碍浏览往往比较困难，如果真的要去掉虚线框而不失去可访问性的话，解决的方案可以考虑加上accesskey属性，当然旁边可以做些注解或者提示，让访问者能够使用快捷键方式访问这些不能被焦点定位的对象。

下面简单介绍下去掉虚线框的几种方式。

1.CSS样式表的outline属性（IE9、FF等浏览器推荐）

对于最新的IE9浏览器以及FireFox里可以使用outline:none，去掉虚线框，当然FF下还可以写成-moz-outline:none。

1
2
3
4

a:focus {
  outline:none;
  -moz-outline:none;
}

2.IE的hidefocus=true属性（IE8及以下版本推荐）

对于版本低于IE9的IE浏览器，我们可以使用hidefocus方法，就比如：

1

<a href="index.php" hidefocus="true"></a>

3.onfocus事件的this.blur();

这个方法效果比较好，但是感觉语义化不好，原理是在获得焦点时去掉焦点。

1

<a href="index.php" onfocus="this.blur();"></a>

好吧，介绍了这三种办法，下面我们可以分情况整合一下，比如如果是IE9或者FF等浏览器就采用CSS的outline方法。如果是其它情况就尝试使用hidefocus或者this.blur()方法。对于JavaScript的方法可以采用遍历的方式。

1
2
3
4
5
6
7
8
9
10
11
12

var anchors = document.getElementsByTagName('a');
for (var i=0; i < anchors.length; i++) {
	anchors[i].hideFocus = true;
}
 
// 或者采用this.blur()的方式，比如像下面这样写
var anchors = document.getElementsByTagName('a');
for (var i=0; i < anchors.length; i++) {
	anchors[i].onfocus = function() {
		this.blur();
	}
}

上面的办法有个缺点，就是遍历了所有的A链接标签，可能有些链接我们依然希望它能够有虚线框，如何只让指定的链接去除虚线框呢？对于IE9及FF、Chrome、Safari等浏览器，我们依然可以通过outline:none的形式去除，当然我们可以定义一个指定的CSS样式比如.hidefocus，就像下面那样：

1
2
3
4

.hidefocus:focus {
  outline:none;
  -moz-outline:none;
}

然后我们就通过<a class="hidefocus" href="index.php">链接文本</a>这种形式指定去掉该链接的虚线框。对于IE9以下版本的IE浏览器该怎么办呢？其实我们可以通过遍历class为hidefocus的链接然后再hideFocus或者this.blur()去除。
遍历class的办法有getElementsByClassName，不过可惜的是IE9以下不支持这个方法，当然有人写过全兼容版本的getElementsByClassName，大家可以看看我这里找到的一个getElementsByClassName版本。

然后在引入getElementsByClassName方法后HTML代码可以这样插入一段脚本了。

1
2
3
4
5
6
7
8
9
10
11
12

<!--[if lt IE 9]>
<script type="text/javascript">
addDOMLoadEvent(
    function() {
        var anchors = getElementsByClassName('hidefocus');
	for (var i=0; i<anchors.length; i++) {
		anchors[i].hideFocus = true;
	}
    }
);
</script>
<![endif]-->

这里的addDOMLoadEvent可以参考《使用DOMContentLoaded取代部分window.onload》，关于if lt IE 9条件注释可以参考《CSS设置样式时区分不同版本IE的办法》。这样这段脚本就专门针对IE9及以下浏览器的class为hidefocus设置.hideFocus = true的属性，然后配合CSS的outline:none，基本就完美了。