威言威语
我愿像茶,苦涩留心,清香予人。
威言威语
当前位置: 首页 > 设计 > 正文

去掉网页上链接点击时的虚线框

经常用鼠标在链接或按钮上点击时会出现虚线框,很多朋友常常想去掉这个不雅的虚线框,但是我个人还是觉得去掉虚线框还是要谨慎为好。
去掉网页上链接点击时的虚线框

经常用鼠标在链接或按钮上点击时会出现虚线框,很多朋友常常想去掉这个不雅的虚线框,但是我个人还是觉得去掉虚线框还是要谨慎为好,为什么呢,因为当你去掉虚线框后表面上确实美观了很多,用鼠标点击链接或按钮时顿觉清爽,但是这同时还带来了可访问性和易用性的下降,为什么这么说呢,因为有些童鞋习惯上用键盘快速的定位并访问相关的链接或按钮,当你去掉虚线框后,就意味着这些对象可能无法获得焦点(focus),或者浏览者可能无法感知到焦点的存在,当然也就不能被定位了。

我们不能单纯的去做网站,做网页要考虑的问题很多,特别是做到无障碍浏览往往比较困难,如果真的要去掉虚线框而不失去可访问性的话,解决的方案可以考虑加上accesskey属性,当然旁边可以做些注解或者提示,让访问者能够使用快捷键方式访问这些不能被焦点定位的对象。

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

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

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


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

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

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

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

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

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

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

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


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,就像下面那样:


.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方法后HTML代码可以这样插入一段脚本了。


<!--[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]-->

您可能还会对这些文章感兴趣!

去掉网页上链接点击时的虚线框:目前有 1 条评论

  1. liumangtao
    沙发
    liumangtao:Google Chrome 24.0.1312.57 Windows 7

    我一般还是喜欢保留着虚线框,不然点着感觉别扭。

    2009-06-06 17:42 回复

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

gravatar

question razz sad smile redface biggrin eek shock confused cool lol mad rolleyes wink cry