如何从tabindex忽略HTML元素?

html HTML

伽罗

2020-03-23

HTML中是否有任何方法告诉浏览器不允许对特定元素进行标签索引?

在我的页面上,尽管有一个用jQuery呈现的杂耍,但是当您通过Tab进行制表时,您会在按下Tab控件移动到页面上的下一个可见链接之前获得大量的制表符按下,因为所有通过制表的内容都被隐藏了。视觉上的用户。

第2902篇《如何从tabindex忽略HTML元素?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

6个回答
凯西里 2020.03.23

只需将属性添加disabled到元素(或使用jQuery为您完成)。禁用将使输入根本无法集中或选择。

null 2020.03.23

如果这些元素自然是按Tab键顺序排列的元素(如按钮和锚点),则使用tabindex = -1将它们从Tab键顺序中移除是一种可访问性。如果它们提供重复的功能,则可以将它们从制表符顺序中删除是可以的,请考虑将aria-hidden = true添加到这些元素,以便辅助技术将其忽略。

Mandy小卤蛋 2020.03.23

您可以使用tabindex="-1"

W3C HTML5规范支持负tabindex的值:

如果值为负整数
,则用户代理必须设置元素的tabindex焦点标志,但不允许使用顺序焦点导航访问该元素。


请注意,尽管这是HTML5功能,可能无法在旧的浏览器上使用。
为了符合W3C HTML 4.01标准(自1999年起),tabindex必须为正数。


以下是纯HTML中的用法示例。

<input />
<input tabIndex="-1" placeholder="NoTabIndex" />
<input />

MandyL 2020.03.23

即使tabindex在规范和HTML中都是小写,也不要忘记Javascript /称为DOM的DOM中tabIndex

不要不介意尝试弄清楚为什么以编程方式更改的选项卡索引调用element.tabindex = -1无法正常工作。使用element.tabIndex = -1

Mandy 2020.03.23

如果您在不支持的浏览器中工作 tabindex="-1",只需给那些需要跳过的事情设置一个很高的tab索引,或许就能摆脱困境例如,tabindex="500"基本上将对象的选项卡顺序移动到页面的末尾。

我这样做是为了获得一个较长的数据输入表单,并在其中插入了一个按钮。这不是人们经常点击的按钮,所以我不希望他们无意间跳到该按钮并按Enter。disabled因为它是一个按钮,所以不起作用。

老丝阿飞 2020.03.23

方法是添加tabindex="-1"通过将其添加到特定元素,键盘导航无法访问有一个伟大的文章,在这里,可以帮助你进一步了解tabindex属性

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android