WEB前端 -- onfocus="this.blur()"

最新推荐文章于 2024-08-30 08:00:00 发布
最新推荐文章于 2024-08-30 08:00:00 发布
阅读量3.9k 收藏 2
点赞数
分类专栏： 前端 文章标签： onfocus

focus是一个事件，前面加个on表示在这个事件发生的时候执行

等号后面的预警，而blur()是this的一个方法，this.blur()就是让这个对象失去焦点。

总之：作用就是在某对象获得焦点时使其失去焦点。这个语句仅仅是为了消除链接获取焦点（如tab键）后的虚线框


<body>
  <a href="#" >第一个链接</a>
  <a href="#" >第二个链接</a>
  <a href="#" οnfοcus="this.blur();">第三个链接</a>
  <a href="#" >第四个链接</a>
  <a href="#" >第五个链接</a>
  <a href="#" >第六个链接</a>
</body>

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

 

（图二）

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

去除虚线框的方法

优劣

兼容性

是否中断tab

<a href=”#” οnfοcus=”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;
}

注释

[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 orfalse两个值，但测试结果是ie5-ie9不管其值为true or false, 只要添加hidefocus属性，该链接都会失去虚线框。

出处： http://www.jb51.net/web/35407.html
风中的妖娆落叶
关注
专栏目录
ztest增删改查
qq_23447931的博客
08-29 312
1、sql.py # -- coding: utf-8 -- import web db = web.database(dbn=&quot;mysql&quot;, db=&quot;test&quot;, user=&quot;root&quot;, host=&quot;127.0.0.1&quot;,
前端开发常用代码片段总结
qingzhishui的博客
05-20 304
一、预加载图像 如果你的网页中需要使用大量初始化不可见的(例如，悬停的)图像，那么可以使用预加载这些图像。 $.preloadImages = function(){    for(var i = 0;i &lt; arguments.length; i++){     $('img').attr(&quot;src&quot;,arguments[i]);    } }; $.preload...
onFocus="this.blur()"
weixin_39407291的博客
06-27 2183
<input name="result" id="result" type="text" onFocus="this.blur();" size="20" value=""> onfocus是聚焦的意思，当你把光标放在文本框上输入的时候，就是聚焦，但这里添加了"this.blur()"，blur的作用就是去除聚焦，也就是你不能把光标放在这个文本框上，换句话说就是你不能输入文本了 整...
this.blur()
weixin_34162695的博客
03-14 329
<inputonfocus="this.blur();"type="text"style="border:0px;"id="ry_xm"value=""readonly="readonly"/> this.blur():取消聚焦，也就是说，鼠标不能放在该文本框上。 当显示数据的时候不准再修改数据时可以这样用。 转载于:http...
前端window.blur() 和 window.focus() 防止切屏的基本知识
最新发布
码农研究僧的博客
08-30 814
window.blur()：该方法会将当前窗口的焦点移开，导致窗口变为非活动状态。通常在用户切换到其他标签或窗口时会触发此事件 window.focus()：该方法用于将焦点重新集中到当前窗口，使其成为活动窗口
javascript的this.blur()
Lapple的专栏
09-20 1973
[code=&quot;html&quot;] [/code] 是一个输入框，用户输入文本的框就是类似于百度的搜索框，大小是20，value=&quot;&quot;说明初始为空 onfocuse=&quot;this.blur()&quot; onfocuse是聚焦的意思，当你把光标放在文本框上输入的时候，就是聚焦，但这里添加了&quot;this.blur()&quot;，blur的作用就是去除聚焦，也就是你不能把光标放在这个文本框上，换句话说就是你不能...
Web丨onfocus = "this.blur();" 这个语句是什么意思？
万人坑
07-15 2502
focus 是焦点事件，前面加 on 则表示在这个事件发生的时候同时执行等号后面的语句， “this.blur();” 就是让对象失去焦点的意思。总结就是：在对象获得焦点的同时使其失去焦点。开发中就是使设备不能通过焦点事件触发其辅助功能，比如说手机的数字键盘弹出。...
onFocus="this.blur()"的解释
10-09 529
onFocus="this.blur()" onFocus即获取焦点的意思，而blur却是失去焦点的意思，因此onFocus="this.blur()"的通俗理解就是：当获取焦点时立即失去焦点，听起来的确有点绕，那么这种方法到底有何使用价值呢？ 1、当你在使用一个文本框时，且在某种情况下有想让文本框不能操作（无法输入文本），这时可以使用onFocus="this.blur()"，即你...
zTree -- jQuery 树插件的实现与应用
cw_9312的博客
02-26 269
在演示之前先要拿到css文件以及图标，还有js插件文件。 zTree文件 在里面。首先获取文件并放好相应的路径。   代码如下 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;meta name=&quot;renderer&quot; content=&quot;webkit&quot
xss练习-prompt(1) to win
Ni9htMar3的博客
09-11 9777
链接地址: http://prompt.ml/0 规则1、成功执行prompt(1). 2、payload不需要用户交互 3、payload必须对下述浏览器有效： - Chrome(最新版) - Firefox(最新版) - IE10 及以上版本(或者IE10兼容模式)4、每个级别至少给出两种浏览器的答案 5、字符越少越好level 0function escape(input)
ztree 增删修改---增加节点
dawn_after_dark的博客
04-24 5012
前言 暂为最后一篇，节点的添加有点难，因为需要自己自行添加。 实现 addhover 函数请仔细看看，具体代码如下： &lt;%@ page language=&quot;java&quot; contentType=&quot;text/html; charset=UTF-8&quot; pageEncoding=&quot;UTF-8&quot;%&gt; &lt;%@ taglib prefix=&quot;c&quot; uri=&quot;http://j
css中链接a的样式 a{blr:expression(this.onFocus=this.blur())}
sunsineq的专栏
07-14 1161
a{blr:expression(this.onFocus=this.blur())} blr没有特殊意思，expression 条件，这句话的意思是链接 a 在获得焦点的同时失去焦点。 如果你用的是图片链接什么的，他不会显示周边的虚线。 此段代码的作用是清除 A 链接在点击时会产生虚线的问题。 三种写法： 1、正常写法 1 <ahref="#" onfocus=this.blur();>链接标题</a> 2、CSS写法 .
关于使用onfocus=”this.blur()”的利与弊
weixin_30339969的博客
06-11 567
onfocus=”this.blur()”这句代码有没有觉得眼熟？没错，我们常用它来去除链接取得焦点时外围出现的虚线框（如图一），google一下，前面几十页谈的都是这个去除虚线框的技巧。但我们也许以前从未想过：我们的这行代码给盲人用户们带来了巨大的困扰：这中断了盲人用户的Tab键路径，导致Tab光标无法聚焦页面的下一个控制器（链接、表单域、object、image map等）。测试如下： ...
onfocus="this.blur()" 文本框不可点击输入
wzwzwzwzw的专栏
10-15 834
onfocus="this.blur()"
链接去掉虚线框的牛B方法onfocus="this.blur()"
weixin_30875157的博客
04-13 107
如何批量消除网页连接上的“虚线框” 各位想必都知道，onfocus=”this.blur()”这条代码能消除链接时的虚线框，但你有没有想过，如果你的网页上有几个甚至上百个链接，而你 又想要去掉上面那些讨厌的虚线框，难道你还一个个去Ctrl+C、Ctrl+V，天哪！这对一个正常人来说绝对是个恶梦。也许你会说，用DW或其它文本编 辑器里的“查找/替换”功能就能解决，对！不可否认，这是一个好办...
A标签的虚线
caibinghong的专栏
05-20 547
    盲人站长深恶痛绝的onfocus=”this.blur()” 这篇文章是淘宝的妙净写的   杭州最美的季节里，淘宝无障碍访问改善小组有幸邀请到盲人在线站长——争渡读屏团队成员——杨永全同学和我们一起面对面交流网站无障碍访问方面的问题。杨同学使用电脑必须使用读屏软件，就像他看不到我们的脸必须靠声音识别我们一样。在谈到读屏软件操作页面时，他对我们前端的同学特别...
批量消除超链接虚线框
命由己造，相由心生
05-29 1018
批量消除超链接虚线框 各位想必都知道，onfocus=”this.blur()”这条代码能消除链接时的虚线框，但你有没有想过，如果你的网页上有几个甚至上百个链接，而你又想要去掉上面那些讨厌的虚线框，难道你还一个个去Ctrl+C、Ctrl+V，天哪！这对一个正常人来说绝对是个恶梦。也许你会说，用DW或其它文本编辑器里的“查找/替换”功能就能解决，对！不可否认，这是一个好办法，但作为一个优秀的we
每日总结20230703: onpaste=“return false” 和 on focus=“this.blur()”，display：flex
weixin_43735471的博客
07-04 388
失去焦点、不可粘贴、通过id获取value值，disPlay:flex---通过将其应用于容器元素，可以实现灵活的自适应布局
AngularJS进阶(三)HTML:让表单、文本框只读，不可编辑的方法
热门推荐
IT全栈 华强工作室
09-11 6万+
HTML:让表单、文本框只读，不可编辑的方法 有时候，我们希望表单中的文本框是只读的，让用户不能修改其中的信息，如使中国">的内容，"中国"两个字不可以修改。实现的方式归纳一下，有如下几种。 方法1:onfocus=this.blur() 中国"onfocus=this.blur()> 方法2:readonly 中国"readonly> 中国"readonly="tru
.hidden_a_line{ noline:expression(this.onfocus=this.blur); }
06-09
这是一段 CSS 代码，用于...它使用了一个 IE 特有的属性 expression，该属性可以让开发者在 CSS 中使用 JavaScript 表达式。...需要注意的是，由于 expression 属性是 IE 特有的，因此这段代码只能在 IE 浏览器中生效。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值