tabIndex的妙用
原创大约 2 分钟
tabIndex的妙用
注
在页面文档中,默认只有a标签以及input等表单元素(输入性质的元素)才能被焦点获取(选中),及被键盘事件访问
解决方案:
- 在div( 非输入性质的元素)标签上 设置 tabindex属性 (可为 -1,0 ,1) tabindex=-1
- 则是不可以被tab键获取焦点,即无法使用键盘事件
- tabindex=0 / 1 则是可以被tab键获取焦点,即可以使用键盘事件
关于tabindex(引自MDN):
tabindex 全局属性 是个整数,表示元素(如果可聚焦)是否能够接受输入焦点。 如果它应该参与键盘序列导航,那么就是它的位置。
它可以设为多种值:
tabindex=负值 (通常是tabindex=“-1”),表示元素是可聚焦的,但是不能通过键盘导航来访问到该元素,用JS做页面小组件内部键盘导航的时候非常有用。
tabindex=“0” ,表示元素是可聚焦的,并且可以通过键盘导航来聚焦到该元素,它的相对顺序是当前处于的DOM结构来决定的。
tabindex=正值,表示元素是可聚焦的,并且可以通过键盘导航来访问到该元素;它的相对顺序按照tabindex 的数值递增而滞后获焦。如果多个元素拥有相同的 tabindex,它们的相对顺序按照他们在当前DOM中的先后顺序决定。
根据键盘序列导航的顺序,值为 0 、非法值、或者没有 tabindex 值的元素应该放置在 tabindex 值为正值的元素后面。
如果我们在 <div> 上设置了 tabindex 属性,它的子元素内容不能使用箭头键来滚动,除非我们在内容上也设置 tabindex。
注:tabindex 的最大值不应超过 32767。如果没有指定,它的默认值为 -1。
案例
案例
<div class="modal-box" tabindex="-1">
<div class="layer"></div>
<div class="wrapper" >
<span class="context">
试一下按esc退出我哦
</span>
</div>
</div>
<button id="btn" style="-webkit-appearance:none ;">显示</button>
const ua = navigator.userAgent.toLowerCase();
const isMobile = /ios|iphone|ipod|ipad|android/.test(ua);
const box = document.querySelector('.modal-box')
const btn = document.getElementById('btn')
box.addEventListener('keydown',function (e){
if(e.key!=='Escape'&&isMobile) return
box.classList.remove('show')
})
btn.addEventListener('click', () => {
box.classList.add('show')
box.focus()
})
box.addEventListener('click', () => {
// 兼容移动端
if(!isMobile) return
box.classList.remove('show')
})
.modal-box {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
overflow: hidden;
z-index: 1000;
text-align: center;
display: none;
outline: none;
transform: all .3s;
}
.modal-box.show {
display: block;
}
.modal-box::before {
content: '';
height: 100%;
width: 0;
vertical-align: middle;
display: inline-block;
}
.layer {
position: absolute;
background-color: black;
opacity: .2;
width: 100%;
height: 100%;
top: 0;
display: none;
}
.wrapper {
position: relative;
z-index: 10001;
display: inline-block;
width: 300px;
line-height: 200px;
background-color: white;
vertical-align: 20%;
border-radius: 10px;
outline: none;
transform: vertical-align .3s;
}
.modal-box.show .wrapper {
vertical-align: middle;
}
.modal-box.show .layer {
display: block;
}