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

!本文可能 超过1年没有更新,今后内容也许不会被维护或者支持,部分内容可能具有时效性,涉及技术细节或者软件使用方面,本人不保证相应的兼容和可操作性。

今天看到淘宝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配合使用吧。

若无特别说明,本网站文章均为原创,原则上这些文章不允许转载,但是如果阁下是出于研究学习目的可以转载到阁下的个人博客或者主页,转载遵循创作共同性“署名-非商业性使用-相同方式共享”原则,请转载时注明作者出处谢绝商业性、非署名、采集站、垃圾站或者纯粹为了流量的转载。谢谢合作!

    • @晴天
      是啊,本来可能大家只局限于为了去虚线框而去去虚线框,于是this.blur()被滥用了,但是换一种思路去想,为什么要去虚线框?还不是为了照顾鼠标用户,在这一点上Mike Smullin的办法还是值得借鉴的。

请稍后...

发表评论

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