tabindex的微妙使用

         大家可能会注意到input,select,textArea等文本框都会有一个属性tabindex,但是都没有用过这个tabindex吧、
简单说一下tabindex;它主要是设置页面上使用Tab键改变页面上文本框获取焦点的顺序。它的值为数字,1,2,3。。。
默认进入页面,光标(即焦点)会选中左上方第一个文本框。 

目前项目中遇到打开个子窗口时候,不想让子页面的光标定位到默认的文本框中,该怎么办呢?

<input type='text' name = 'name1'/>
<select name = 'name2'><option value='1'></option></select>
<textArea name="name3" cols='2' rows='2'></textArea>

 默认页面光标定位到type="text"中,如果我想让光标定位到select文本框上,目前有两个方法:

 

 1、一般有人都会在该页面的最后部分加上一个JavaScript、     

 <script langage="text/javascript">
         document.form.name2.focus();
   </script>

      但是这种方法偶尔会js报错:"由于该控件目前不可见、未启用或其类型不允许,因此无法将焦点移向"等等、经测试,发现只要这个页面打开的速度慢的时候就会报错。

2、接下来的方法就要使用本文所说的tabindex了、

   <input type='text' name = 'name1' tabindex='3'/>
   <select name = 'name2'><option value='1' tabindex='1'></option></select>
   <textArea name="name3" cols='2' rows='2' tabindex='2'></textArea>

如果想让光标定位到哪个文本框,则把该文本框的tabindex设置为1,即1的优先级最高,依次排序即可、

 

 

tabindex 属性用于定义用户使用 Tab 键浏览页面时遵循的顺序,允许开发者控制元素是否可聚焦、使用顺序焦点导航是否可达以及元素的相对顺序[^2][^3]。默认情况下,自然制表顺序与标记中的源顺序匹配,但在某些情况下,可能需要覆盖默认顺序。不过,建议以逻辑流程制作页面,让浏览器以默认顺序浏览,避免过度使用该属性破坏自然阅读和导航流程[^2][^4]。 以下是 tabindex 属性不同取值的使用方法: - **正值**:当为元素设置一个正整数的 tabindex 值时,会改变元素在 Tab 键导航中的顺序。值越小,元素在 Tab 键顺序中越靠前。例如: ```html <a href="https://www.baidu.com/" tabindex="2">百度</a><br /> <a href="http://www.google.com/" tabindex="1">谷歌</a><br /> <a href="https://cn.bing.com//" tabindex="3">Bing</a> ``` 在这个例子中,按 Tab 键时,焦点会先到“谷歌”链接(tabindex=1),接着是“百度”链接(tabindex=2),最后是“Bing”链接(tabindex=3)[^5]。 - **0**:将 tabindex 设置为 0 会使元素成为可聚焦的,并且按照文档的源顺序参与到 Tab 键导航中。适用于那些默认没有焦点但需要可聚焦的元素,如自定义的按钮或其他交互元素。例如: ```html <div tabindex="0">这是一个可聚焦的 div</div> ``` 这里的 div 原本不可聚焦,通过设置 tabindex="0",它可以通过 Tab 键获取焦点[^3]。 - **-1**:设置 tabindex="-1" 会使元素可聚焦,但不会在正常的 Tab 键顺序中。这意味着用户不能使用 Tab 键按顺序选中该元素,但可以通过脚本(如 JavaScript)使其获得焦点。例如: ```html <button tabindex="-1">Button 1</button> ``` 在这个例子中,用户不能使用 Tab 键访问该按钮,但可以使用鼠标或触摸屏等其他输入设备来与之交互,也可以通过脚本让其获得焦点[^4][^5]。 使用 tabindex 时要谨慎,过度使用可能会破坏页面自然的阅读顺序和导航流程,最好只为没有自然焦点或需要特殊键盘导航顺序的元素使用该属性,同时要进行多浏览器和多平台测试,以确保良好的兼容性和用户体验[^1][^4]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值