站长深恶痛绝的onfocus=”this.blur()”是什么

这篇文章将为大家详细讲解有关站长深恶痛绝的onfocus=”this.blur()”是什么,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

在潜江等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供网站建设、网站设计 网站设计制作按需制作,公司网站建设,企业网站建设,成都品牌网站建设,成都全网营销推广,外贸网站建设,潜江网站建设费用合理。

在谈到读屏软件操作页面时,他对我们前端的同学特别的强调:他最深恶痛绝的就是页面链接上有 onfocus=”this.blur()” 这句代码,这从何说起呢?

站长深恶痛绝的onfocus=”this.blur()”是什么

(图一)

各位同学,看到这句代码有没有觉得眼熟,对的,你懂的,我们常用它来去除链接取得焦点时外围出现的虚线框(如上图一),google一下,前面几十页谈的都是这个去除虚线框的技巧。但我们也许以前从未想过:我们的这行代码给盲人用户们带来了巨大的困扰:这中断了盲人用户的Tab键路径,导致Tab光标无法聚焦页面的下一个控制器(链接、表单域、object、image map等)。测试如下:

代码如下:



第一个链接
第二个链接
第三个链接
第四个链接
第五个链接
第六个链接

按下Tab键,第一和第二个链接都可以正常获取焦点,继续Tab到第三个链接时,悲剧出现了:此时焦点会回到第一个链接,而无法Focus到第四个链接,原因是当Focus到第三个链接时,onfocus=”this.blur()” 事件处理强制触发了失焦,焦点重新回到文档的最开始。于是不停按Tab的结果就是焦点在前面三个链接轮流转,后面的内容通过Tab键无法访问[1]。

站长深恶痛绝的onfocus=”this.blur()”是什么 (图二)

那么,有更好的方式吗?从根源上看,加onfocus=”this.blur()”是为了去除链接获取焦点后外围的虚线框(当然chrome、safari、opera下的focus效果各异,这里姑且就这么叫吧 )。W3C关于Outline的文章里说明这个虚线框用来告诉用户当前页面获取焦点的元素。我觉得,虚线框的存在有它的合理性,但有时你也许无法回避某些”视觉洁癖”需求(如图二:虚线框使“商品”背景和下面的红色色块分隔开了),以下总结了去掉虚线框的几种常用方法:

去除虚线框的方法优劣兼容性是否中断tab
this blur链接聚焦触发时失去焦点,js和html耦合在一起没有兼容性问题
a:focus {outline:none}或
a{outline:none}
outline由css2.1引入,去除虚线框视觉上的问题正是css的职责ie6/ie7不支持,ie8+/ff /safari/opera[2]支持
hidefocus该属性是ie的私有属性[3]ie5+支持
a { noFocusLine: expression(this.onFocus = this.blur())}可批量处理,但expression的性能问题不能忽视expression ie6/7支持,ie8+、非ie不支持

综合以上,去除链接虚线框的推荐方法是:ie下用hidefocus属性,ff/chorme/opera/safari下用outline:none。即:
链接
a:focus {
outline:none;
}

同学无奈地说,如果页面因为onfocus="this.blur()"导致tab无法访问页面全部内容,争渡读屏软件在读取页面之前会强制过滤掉这个属性,但是如果用户是在js里面动态触发this.blur(),读屏软件又要出新招来克制了。这无疑增加了读屏软件的开发工作量,为了让盲人用户们能更顺畅的访问我们的网站,尽量避免使用onfocus="this.blur()"哦。

注释

[1]Safari默认情况下,按tab键是不会focus链接的,但会focus表单域,在偏好设置-高级勾选“按下tab以高亮显示网页上的每一项”可开启该功能。Opera比较特殊,它通过shift+上下左右方向键可以向上下左右focus页面焦点。

[2]在Opera下点击链接(focus和active状态)时都不会出现所谓的虚线框,所以 Opera下链接的虚线框问题可以不计。 Opera 通过shift+上下左右键产生的线框通过outline:none并不能去除,但是Opera支持outline这个属性。

[3]hidefocus属性是ie的私有属性,虽然hidefocus属性有true or false两个值,但测试结果是ie5-ie9不管其值为true or false, 只要添加hidefocus属性,该链接都会失去虚线框。

关于“站长深恶痛绝的onfocus=”this.blur()”是什么”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


名称栏目:站长深恶痛绝的onfocus=”this.blur()”是什么
网页链接:http://myzitong.com/article/jeheoe.html