[转]去掉网页上链接或按钮的虚线框
2012-12-24 18:04
411 查看
原文:http://wangye.org/blog/archives/70/经常用鼠标在链接或按钮上点击时会出现虚线框,很多朋友常常想去掉这个不雅的虚线框,但是我个人还是觉得去掉虚线框还是要谨慎为好,为什么呢,因为当你去掉虚线框后表面上确实美观了很多,用鼠标点击链接或按钮时顿觉清爽,但是这同时还带来了可访问性和易用性的下降,为什么这么说呢,因为有些童鞋习惯上用键盘快速的定位并访问相关的链接或按钮,当你去掉虚线框后,就意味着这些对象可能无法获得焦点(focus),或者浏览者可能无法感知到焦点的存在,当然也就不能被定位了。我们不能单纯的去做网站,做网页要考虑的问题很多,特别是做到无障碍浏览往往比较困难,如果真的要去掉虚线框而不失去可访问性的话,解决的方案可以考虑加上accesskey属性,当然旁边可以做些注解或者提示,让访问者能够使用快捷键方式访问这些不能被焦点定位的对象。下面简单介绍下去掉虚线框的几种方式。1.CSS样式表的outline属性(IE9、FF等浏览器推荐)对于最新的IE9浏览器以及FireFox里可以使用outline:none,去掉虚线框,当然FF下还可以写成-moz-outline:none。
2.IE的hidefocus=true属性(IE8及以下版本推荐)
对于版本低于IE9的IE浏览器,我们可以使用hidefocus方法,就比如:
3.onfocus事件的this.blur();
这个方法效果比较好,但是感觉语义化不好,原理是在获得焦点时去掉焦点。
上面的办法有个缺点,就是遍历了所有的A链接标签,可能有些链接我们依然希望它能够有虚线框,如何只让指定的链接去除虚线框呢?对于IE9及FF、Chrome、Safari等浏览器,我们依然可以通过outline:none的形式去除,当然我们可以定义一个指定的CSS样式比如.hidefocus,就像下面那样:
然后我们就通过<aclass="hidefocus"href="index.php">链接文本</a>这种形式指定去掉该链接的虚线框。对于IE9以下版本的IE浏览器该怎么办呢?其实我们可以通过遍历class为hidefocus的链接然后再hideFocus或者this.blur()去除。
遍历class的办法有getElementsByClassName,不过可惜的是IE9以下不支持这个方法,当然有人写过全兼容版本的getElementsByClassName,大家可以看看我这里找到的一个getElementsByClassName版本。
然后在引入getElementsByClassName方法后HTML代码可以这样插入一段脚本了。
这里的addDOMLoadEvent可以参考《使用DOMContentLoaded取代部分window.onload》,关于ifltIE9条件注释可以参考《CSS设置样式时区分不同版本IE的办法》。这样这段脚本就专门针对IE9及以下浏览器的class为hidefocus设置.hideFocus=true的属性,然后配合CSS的outline:none,基本就完美了。
-----------------------------------------------------------
Update2012-12-25
文章http://www.mikesmullin.com/?p=23&replytocom=8803#respond中提到了兼顾Keyboard和Mouse的方式。
a:focus{ outline:none; -moz-outline:none; }
2.IE的hidefocus=true属性(IE8及以下版本推荐)
对于版本低于IE9的IE浏览器,我们可以使用hidefocus方法,就比如:
<ahref="index.php"hidefocus="true"></a>
3.onfocus事件的this.blur();
这个方法效果比较好,但是感觉语义化不好,原理是在获得焦点时去掉焦点。
<ahref="index.php"onfocus="this.blur();"></a>
好吧,介绍了这三种办法,下面我们可以分情况整合一下,比如如果是IE9或者FF等浏览器就采用CSS的outline方法。如果是其它情况就尝试使用hidefocus或者this.blur()方法。对于JavaScript的方法可以采用遍历的方式。
varanchors=document.getElementsByTagName('a');
for(vari=0;i<anchors.length;i++){
anchors[i].hideFocus=true;
}//或者采用this.blur()的方式,比如像下面这样写
varanchors=document.getElementsByTagName('a');
for(vari=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;
}
然后我们就通过<aclass="hidefocus"href="index.php">链接文本</a>这种形式指定去掉该链接的虚线框。对于IE9以下版本的IE浏览器该怎么办呢?其实我们可以通过遍历class为hidefocus的链接然后再hideFocus或者this.blur()去除。
遍历class的办法有getElementsByClassName,不过可惜的是IE9以下不支持这个方法,当然有人写过全兼容版本的getElementsByClassName,大家可以看看我这里找到的一个
然后在引入getElementsByClassName方法后HTML代码可以这样插入一段脚本了。
<!--[ifltIE9]>
<scripttype="text/javascript">
addDOMLoadEvent(
function(){
varanchors=getElementsByClassName('hidefocus');
for(vari=0;i<anchors.length;i++){
anchors[i].hideFocus=true;
}
}
);
</script>
<![endif]-->
这里的addDOMLoadEvent可以参考
-----------------------------------------------------------
Update2012-12-25
文章
<scripttype="text/javascript">//<!--
varrunOnLoad=newArray();//forqueuingmultipleonLoadeventfunctions
window.onload=function(){for(vari=0;i<runOnLoad.length;i++)runOnLoad[i]()}
//hidedotted:focusoutlineswhenmouseisused
//butNOTwhentabkeyisused
if(document.getElementsByTagName)
for(variina=document.getElementsByTagName('A')){
a[i].onmousedown=function(){
this.blur();//mostbrowsers
this.hideFocus=true;//ie
this.style.outline='none';//mozilla
}
a[i].onmouseout=a[i].onmouseup=function(){
this.blur();//mostbrowsers
this.hideFocus=false;//ie
this.style.outline=null;//mozilla
}
}
//--></script>
相关文章推荐
- 去掉网页上链接或按钮的虚线框
- CSS+JS方法去除点击链接,按钮时出现的虚线框
- 去掉链接中的虚线边框
- 使用 CSS 去掉 iPhone 网页上按钮的超大圆角默认样式
- CSS:去除点击链接和按钮时出现的虚线框
- 网页中按钮 、超级链接的处理细节
- 使用 CSS 去掉 iPhone 网页上按钮的默认圆角样式
- CSS:去除点击链接和按钮时出现的虚线框
- 纯CSS搞定按钮、链接点击时的虚线
- Flex中如何给一个按钮添加链接,点击链接打开一个网页呢?
- 去掉页面图片链接边框或虚线框和表单的只读属性(转)
- 去掉链接a标签外的虚线框(ff,ie)
- QWebView隐藏时使用代码点击网页上的一个链接或按钮无效。
- Qt如何去掉按钮等控件的虚线框(焦点框)
- 使用CSS去掉网页中超链接的下划线示例
- a:focus{outline: none;} 如何去掉点击链接时周围的虚线框outline属性
- 如何去掉点击链接时周围的虚线框outline属性 去除a标签边上的虚线
- 去掉点击链接后的虚线框
- 去掉图片按钮外围虚线
- Qt如何去掉按钮等控件的虚线框(焦点框)(两种方法)