杭州最美的季节里，淘宝无障碍访问改善小组有幸邀请到盲人在线站长——争渡读屏团队成员——杨永全同学一起面对面交流网站无障碍访问方面的问题。杨 同学使用电脑必须使用读屏软件，就像他看不到我们的脸必须靠声音识别我们一样。在谈到读屏软件操作页面时，他对我们前端的同学特别的强调：他最深恶痛绝的 就是页面链接上有 onfocus=”this.blur()” 这句代码，这从何说起呢？
(图一)
各 位同学，看到这句代码有没有觉得眼熟，对的，你懂的，我们常用它来去除链接取得焦点时外围出现的虚线框（如上图一），google一下，前面几十页谈的都 是这个去除虚线框的技巧。但我们也许以前从未想过：我们的这行代码给盲人用户们带来了巨大的困扰：这中断了盲人用户的Tab键路径，导致Tab光标无法聚 焦页面的下一个控制器（链接、表单域、object、image map等）。测试如下：
<body>
<a href=”#” >第一个链接</a>
<a href=”#” >第二个链接</a>
<a href=”#” onfocus=”this.blur();”>第三个链接</a>
<a href=”#” >第四个链接</a>
<a href=”#” >第五个链接</a>
<a href=”#” >第六个链接</a>
</body>
按 下Tab键，第一和第二个链接都可以正常获取焦点，继续Tab到第三个链接时，悲剧出现了：此时焦点会回到第一个链接，而无法Focus到第四个链接，原 因是当Focus到第三个链接时，onfocus=”this.blur()” 事件处理强制触发了失焦，焦点重新回到文档的最开始。于是不停按Tab的结果就是焦点在前面三个链接轮流转，后面的内容通过Tab键无法访问[1]。
那 么，有更好的方式吗？从根源上看，加onfocus=”this.blur()”是为了去除链接获取焦点后外围的虚线框（当然chrome、 safari、opera下的focus效果各异，这里姑且就这么叫吧 ）。W3C关于Outline的文章里说明这个虚线框用来告诉用户当前页面获取焦点的元素。我觉得，虚线框的存在有它的合理性，但有时你也许无法回避某 些”视觉洁癖”需求（如图二：虚线框使“商品”背景和下面的红色色块分隔开了），以下总结了去掉虚线框的几种常用方法：
<a href=”#” onfocus=”this.blur()”>this blur</a>链接聚焦触发时失去焦点，js和html耦合在一起没有兼容性问题是a:focus {outline:none}或
a{outline:none}outline由css2.1引入，去除虚线框视觉上的问题正是css的职责ie6/ie7不支持,ie8+/ff /safari/opera[2]支持否<a href=”#” hidefocus=”true” >hidefocus</a>该属性是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 href=”#” hidefocus=”true” >链接</a>
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属性，该链接都会失去虚线框
相关推荐
a{ blr:[removed]this.onFocus=this.blur()); /* IE Opera */ outline:none; /* FF Opera */ } a:focus{ -moz-outline-style: none; /* FF */ } 全 局控制 CSS实现 a{blr:[removed]this.onFocus=this.close());} /*...
<A onfocus=this.blur(); onClick="fGoto('CC.goOutlink(\'/163/shoujian/index.jsp.htm\');');CC.changeServiceTab(this.parentNode);" href="javascript:fGoto();" hidefocus="true" class="ct">收件箱</A></LI> ...
杭州最美的季节里，淘宝无障碍访问改善小组有幸邀请到盲人在线站长——争渡读屏团队成员——杨永全同学和我们一起面对面交流网站无障碍访问方面的问题。
复制代码代码如下: a{ bblr:[removed]this.onFocus=this.blur());/*IE使用*/ outline-style:none;/*FF使用*/ } /*去除a标签带来的虚框*/ 2、全 局控制 CSS实现 复制代码代码如下: a{blr:[removed]this.onFocus=...
<input style="ime-mode:disabled"> 关闭输入法 <br/>光标是停在文本框文字的最后 <script language="javascript"> ... <a href="#" onFocus="this.blur()"><img src="logo.jpg" border=0></a>
if(this.options.timePicker&&this.options.datePicker){this.options.currentFormat=this.options.dateTimeFormat}else{if(this.options.timePicker){this.options.currentFormat=this.options.timeFormat}else{...
方法1: onfocus=this.blur() 当鼠标放不上就离开焦点<input type="text" name="input1" value="中国" onfocus=this.blur()> 方法2:readonly <input type="text" name="input1" value="中国" readonly> ...
--方法1: onfocus=this.blur() 当鼠标放不上就离开焦点 --> <input type="text" name="input1" value="中国" onfocus=this.blur()> <!-- 方法2:readonly 文字不会变色，也是不可编辑的--> <input ...
eye.htc event=”onfocus” onevent>[removed]function example(){this.blur();}[removed] <style> a {behavior:url(eye.htc)} </style> 二、 a {link:[removed]this.onfocus=this.blur)} ...
select style=width:195px name=role id=role onfocus=this.defaultIndex=this.selectedIndex; onchange=this.selectedIndex=this.defaultIndex;> 这种方法可以使下拉框和平常没有区别，看起来没有任何不同。...
js实现焦点进入文本框内关闭输入法:imeMode 要用到的东西: imeMode:xxx 有四个参数 active 代表输入法为中文 inactive 代表输入法为英文 auto 代表打开输入法 (默认) disable 代表关闭输入法 <INPUT onfocus=" ...
介绍两个方法和种是利用javascript onFocus onBlur来判断焦点和失去焦点，加一种是利用jquery $("p").blur(); 或$("p").blur(fn)来实现，有需要的朋友可以参考一下
onFocus:当输入获得焦点后，产生该文件 Onchange:当文字值改变时，产生该事件 Onselect:当文字加亮后，产生该文件 <input type="text" value="mm" onfocus="if(value=='mm) {value=''}" onblur="if (value=='') {...
文本框的默认值 <input type=text value="123" onfocus="alert(this.defaultValue)"> title换行 obj.title = "123
sdfs " 获得时间所代表的微秒 var n1 = new Date("2004-10-10".replace(/-/g, "/"))....
<LI id=phonelogin><A onfocus=this.blur() onclick=change_login_type(1,1) href="https://login.dangdang.com/Signin.aspx#" name=mobile_login_tap>手机号码</A> </LI></UL> <DIV class=clear> <UL class=ul...
this.dt["d"]=Math.min(A+C,this.dt["d"])}}if(this.dt.refresh())return this.dt}return""},show:function(){var A=V[N].getElementsByTagName("div"),$=100000;for(var B=0;B<A.length;B++){var _=parseInt(A[B]....
if (this.page > this.pageCount) this.page = this.pageCount; this.page = parseInt(this.page); this.pageCount = parseInt(this.pageCount); } showPages.prototype.createHtml = function(mode){ //生成html...
textarea class='message1' type='text' placeholder=请选择或者输入捎话(60字以内) maxlength='80' style=word- wrap:break-word onfocus=this.blur() bindtap=''></textarea> <view class='fast'>快速捎...
方法如下： 代码如下:<select onbeforeactivate=”return false” onfocus=”this.blur()” onmouseover=”this.setCapture()” onmouseout=”this.releaseCapture()”> <option>1 </select>