div:focus 失效问题

原创 已于 2023-04-25 08:22:22 修改 · 463 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #html #javascript

于 2023-04-24 19:00:54 首次发布
文章讲述了在HTML中，div等块级元素默认不支持:focus伪类，因为它们无法通过键盘事件获取焦点。但通过给div添加tabindex属性，可以使得这些元素变得可聚焦，从而能够响应用户的键盘操作。这样增强了网页的可访问性和用户体验。

div不支持:focus伪类 的，因为div等元素无法接受键盘或其他用户事件

在div元素设置tabindex属性即可正常使用

<div tabindex="1" >
    <div>test1</div>
    <div>tes2t</div>
</div>

cw_csdn
关注
动态添加dom元素(innerHTML方式)时focus()在第二次时会失效的解决办法
lishirong_李世荣的专栏
12-02 2582
纠结了很久，终于把这个问题解决了！之前在动态构建这个innerHTML内容时，第一次光标可以自动定位到文本框中,但是在第二次构造的时候就失效了。最后终于在一个网站上瞅到了解决办法。非常感谢blueidea的misshjn网友提出的问题，也非常感谢mozart0这位网友给出的解答，直接帮我解决了这个困惑。引用地址：http://bbs.blueidea.com/thread-2608749-1-1.
div元素设置伪类:focus不生效的解决办法
jiangjunyuan168的博客
09-17 4458
遇到一个需求，在vue项目中根据a标签那样的链接跳转效果来实现组件的切换，于是乎打算通过给div设置伪类:focus来模仿a标签被点击后变色的效果，但是当给div设置伪类:focus后发现并没有生效。tabIndex属性：利用tab键遍历页面的表单元素和链接，按照tabindex的大小决定顺序，同时也有指示其元素是否可以聚焦（获得焦点）的作用。:focus ：在元素获得焦点时向元素添加特殊的样式（如果是给元素设置颜色样式的话，被点击后变色，且颜色在点击后不消失）百度了一下才发现div是。
div标签 :focus伪类不生效
weixin_50012993的博客
07-09 508
div 是不支持:focus 伪类 的，因为 div 等元素无法接受键盘或其他用户事件。div 元素添加 tabIndex 属性，使其能够支持:focus 伪类。
【前端】javascript 代码顺序之focus()焦点无效的原因
小5聊的博客
10-31 3475
【前端】javascript 代码顺序之focus()焦点无效的原因
div 加伪类:focus
秋水不寒的专栏
07-20 7284
以前只知道input  可以加focus ，昨天项目中有需要在使用div 点击效果改变，不太想js，就尝试了 下div:focus 以下是个人总结的优缺点： .testdiv{background-color:red} 123 123 123 123 123 123 效果点击div 当前div背景为红色 省略一部分js 代码 缺点：当键
jquery 中的focus()无效的问题
weixin_33862188的博客
01-20 1218
当我写了个 大约以下的代码 发现focus没有效果$('input').blur(function(){if(){}else{$(this).focus();}})当$(this) 换成 $($('input')[11]) 时有成功 好像是因为 事件触发的先后原因导致 用setTimeout() 延迟focus()的执行，代码就生效了 转载于:https:...
input:focus
07-27
- *3* [css小技巧，input框focus，让外层包裹input的div产生样式变化（可以当做是是div的focus伪类）](https://blog.youkuaiyun.com/bittingCat/article/details/120505692)[target="_blank" data-report-click={"spm":...
JavaScript使用focus()设置焦点失败的解决方法
10-25
作者在解决方法的探索过程中尝试使用了try-catch结构来捕获focus()方法调用失败的原因，但仍未找到问题所在。 最终，问题在无意中得到解决，原因是在弹出对话框之前，需要主动调用一个名为“flur”的方法来取消原有...
el-input .focus失效
最新发布
01-03
### 解决 `el-input` 组件 `.focus()` 方法失效问题 对于 `el-input` 的 `.focus()` 方法无法正常工作的情况，通常是因为该组件并非直接的 DOM 输入元素，而是由 Vue 和 Element UI 封装后的虚拟节点。因此，在尝试...
el-input的focus事件失效
05-20
如果 el-input 的 focus 事件失效，可能有以下几个原因： 1. 没有正确绑定事件：请确保你已经正确绑定了 focus 事件，例如： ``` <el-input @focus="handleFocus"> ``` 2. 绑定的方法名错误：请确保你绑定的方法...
jquery focus在click等事件中失效
mxd
07-29 1965
使用测试浏览器为firefox，以下函数中的focus失效：
css的元素:focus伪类不生效
最是人间留不住，朱颜辞镜花辞树。
11-28 4912
遇到一个需求，在vue项目中根据a标签那样的链接跳转效果来实现组件的切换，于是乎打算通过给div设置伪类:focus来模仿a标签被点击后变色的效果，但是当给div设置伪类:focus后发现并没有生效。tabIndex属性：利用tab键遍历页面的表单元素和链接，按照tabindex的大小决定顺序，同时也有指示其元素是否可以聚焦（获得焦点）的作用。:focus ：在元素获得焦点时向元素添加特殊的样式（如果是给元素设置颜色样式的话，被点击后变色，且颜色在点击后不消失）
focus()不生效
qq_43297502的博客
08-11 559
focus不生效focus()不生效 focus()不生效 如果你使用的是jQuery+bootstrap $(myModal).modal('show'); $(myModal).on('shown.bs.modal', function() { $('#modalSearchBox').focus() }); 其他情况请看关于focus()不生效
jq html后无法获取焦点,Jquery中关于blur和focus事件无法生效的解决办法
weixin_35676745的博客
06-08 1018
Jquery blur和focus事件无法生效$(function(){alert("页面生效");$(".login_shopcart").blur(function(){alert("blur生效");$(".shopcart_img").attr("src","myimg/shopcart_img.png");$("#ShopCart_num").show();});$(".login_sh...
jquery 编辑框foucs失效问题
Baby_加油_的博客
11-27 445
这是一个常识，却常常被我们忽略。 谨记，如果你的编辑框在弹框里，处于隐藏状态，则，需要，先显示，再focus show方法一定要比focus方法先一步，只有input显示了，才能focus() <div class="pop-bd" style="padding: 20px 30px;display:none;"> <textarea rows="20" id="inpu...
div的onblur事件
weixin_30419799的博客
03-21 930
一般情况下，onblur事件只在input等元素中才有，而div却没有，因为div没有tabindex属性，所以要给div加上此属性。 如： <div tabindex="0" hidefocus="true" onfocus='alert("得到焦点");' onblur='alert("失去焦点");' style="border:1px solid #ccc;widt...
focus()在IOS上失效的解决方法
Jana Jing的分享
11-12 2710
<input id='myInput'></input> <div @click='replyComment'>点击</div> replyComment() { var iosInput = document.getElementById('myInput'); iosInput.focus(); }, 不能将iosInput.focus()封装在函数中再由事件触发，这样也会失效 ...
如何让div有focus或者blur事件？
柚稚的博客
08-06 6105
div本身是没有focus或者blur事件的，需要给它加上一个属性tabindex <div tabindex="111"></div> 像上面，div就有了focus或者blur事件 tabindex可以设置tab键在控件中的移动顺序。 当tabindex=0时，该元素可以用tab键获取焦点，且访问的顺序是按照元素在文档中的顺序来focus，即使采用了浮动改变了页面中显示的顺序，依然是按照html文档中的顺序来定位。 当tabindex=-1时，该元素用tab键获取不到焦点，但是
给div加focus和查看当前focus的元素
汤一飞
08-29 1265
给div加focus： 设置div的tabindex 查看当前焦点所在元素： document.activeElement
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值