巧用hideFocus改善超链接的用户体验

用户体验是个大话题,本文分享一下超链接中的hideFocus的用法,来小提升一下效果!

也许你还不知道它有什么作用,简单说一下,hideFocus就是在点击超链接时,对是否显示外虚线框的设定!

hideFocus即隐藏聚焦,具有使对象聚焦失效的功能,其功能相当于: onFocus="this.blur()" 也可写作 hidefocus="true",也可省略赋值直接写hideFocus。

如果超链接没有添加hideFocus,鼠标点击该超链接,则外面出现一个虚线框,即为聚焦,而使用了hideFocus则不会有虚线框。在IE下,需要在标签 A 的结构中加入 hidefocus="true" 属性即可!看下面演示你就知道了!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head><title> 巧用hidefocus改善超链接的用户体验 by nuodou.com </title></head>
<body>
<a href="#" hidefocus="true" title="">点此没有虚线框</a>
<br><br>
<a href="#" title="">点此可见有虚线框</a>
</body>
</html>

而在FF等浏览器中则相对比较容易,直接给标签 a 定义样式 outline:none; 就可以了,即:

A {outline:none;}

或者

A {blr:expression(this.onFocus=this.blur());outline:none;}  //支持IE

ps.也许你觉得不显示虚线框会降低用户体验,那你还是无视本文吧哈哈!