tabindex属性
2022-07-07 本文已影响0人
skoll
简介
1 .tab键的作用
1 .聚焦到下一个按钮，输入框，或者链接等
2 .单词间的间隔是tab控制的
3 .快速提交表单
2 .默认支持切换的元素：这些元素是focusable元素
1 .带有href属性的标签
2 .带有href属性的link标签
3 .button标签
4 .input标签
5 .select标签
6 .textarea标签
7 .这些元素默认使用tab键，js方法focus()可以聚焦
tabIndex的作用
1 .调整聚焦顺序
2 .把非focusable的元素变成focusable。本来不能支持tab聚焦，现在可以了
3 .tabIndex的值分类
1 .tabindex==0:元素可以被tab键获取焦点，访问顺序是按照元素在文档中的顺序来focus，尽管采用浮动等方式改变了页面的显示顺序，但是实际任然按照文档中的顺序来定位
2 .tabindex==-1.不能被tab聚焦，但是可以被focus方法聚焦，也就是可以被js触发
<div tabindex="-1" class="div">4</div>
document.querySelector('.div').focus()
3 .tabindex>=1:该元素可以用tab获取焦点，并且优先级大于tabindex==0,在tabindex>1的时候，数字越小，优先级越高，并且如果有index值相同，就按照文档中的顺序来
tabIndex创造更好的用户体验
1 .针对自定义标签进行富文本交互优化
2 .对特定节点禁止聚焦操作
1 .某些浮层以及上层节点，如toast组件，模态框，侧边弹出信息等，我们不希望节点被用户聚焦操作，可以将节点的tabIndex设置为-1.就能避免这一问题
3 .复杂列表控制聚焦顺序
1 .一些复杂的树形结构或者列式结构，如果需要用于操作顺序按照我们预想的顺序进行聚焦，可以用tabIndex值的大小来进行处理
2 .回答完一个列表，自动帮我定位到下一个输入框
3 .表单提交的时候，没有填的必填项，或者格式不正确的操作，聚焦到需要重新填写的输入框
4 .获取当前聚焦元素，并朗读.每次tab键被按下的时候，都找下activeElement
keydown的话，会留上一些被聚焦的元素
document.addEventListener('keyup',(e)=>{
let ele=document.activeElement.tagName
console.log(e,ele)
})
activeElement
1 .
一个简单的粒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div tabindex="5" data-world="牛逼">牛逼</div>
<div>2</div>
<div tabindex="3" data-world="3">3</div>
<div tabindex="4" class="div" data-world="4">4</div>
<a href="/" data-world="百度">百度</a>
<script>
document.addEventListener('keyup',(e)=>{
let world=document.activeElement.getAttribute('data-world')
if(world!=null){
say(world)
}
})
function say(world){
// const speak=new window.SpeechSynthesisUtterance('噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟')
if ( 'speechSynthesis' in window ) {
const to_speak = new SpeechSynthesisUtterance(world || 'Hello world!');
to_speak.lang="zh-HK"
// to_speak.lang="ja-JP"
speechSynthesis.cancel();
speechSynthesis.speak(to_speak);
} else {
alert('not supported');
}
}
</script>
</body>
</html>
