(译)如何让div可以有focus事件?
最简单的办法是给div的tabIndex属性设值.
<div tabindex="-1" onfocus="console.log('focus')" onblur="console.log('blur')">Focus me</div>
也可以通过CSS来实现达到类似效果:
<style>
#focus-example > .extra { display: none; }
#focus-example:focus > .extra { display: block; }</style>
<div id="focus-example" tabindex="0">
<div>Focus me!</div>
<div>Hooray!</div>
</div>
在第2个例子中我们是显示/隐藏子元素, 因此当我们与子元素进行交互时, 父元素始终是focus的, 这种情况下我们就可以嵌入links, forms, videos等等子元素了.
tabindex属性值的是有一定含义的:
* -1: 用户不能通过tab的方式达到该元素, 只允许通过编程方式来获得focus(element.focus()), 或者就是点击获得focus.
* 0: 用户可以通过tab的方式达到该元素, 自动定义tab的顺序.
* >0: 给元素一个指定的tab优先级, 等于1时优先级最高.
原文: Cross-browser div focus and blur
<div tabindex="-1" onfocus="console.log('focus')" onblur="console.log('blur')">Focus me</div>
也可以通过CSS来实现达到类似效果:
<style>
#focus-example > .extra { display: none; }
#focus-example:focus > .extra { display: block; }</style>
<div id="focus-example" tabindex="0">
<div>Focus me!</div>
<div>Hooray!</div>
</div>
在第2个例子中我们是显示/隐藏子元素, 因此当我们与子元素进行交互时, 父元素始终是focus的, 这种情况下我们就可以嵌入links, forms, videos等等子元素了.
tabindex属性值的是有一定含义的:
* -1: 用户不能通过tab的方式达到该元素, 只允许通过编程方式来获得focus(element.focus()), 或者就是点击获得focus.
* 0: 用户可以通过tab的方式达到该元素, 自动定义tab的顺序.
* >0: 给元素一个指定的tab优先级, 等于1时优先级最高.
原文: Cross-browser div focus and blur
热门话题 · · · · · · ( 去话题广场 )
- 歌手2024直播 4.3万次浏览
- 你小时候最讨厌的同学现在变成什么样了? 20.0万次浏览
- 翻翻你家压箱底的老照片 379.5万次浏览
- 如果你有分身会选择做些什么? 11.4万次浏览
- 关于虫子的野蛮回忆 23.5万次浏览
- 什么时候第一次接触到死亡? 18.2万次浏览