如何在不使用tabindex的情况下跳过项目？

Question

在javascript onfocus（）处理程序中，是否有一种好方法可以将焦点转移到Tab键顺序中的下一个项目，而无需手动输入应该是下一个项目的ID？

我在Django / jQuery中构建了一个HTML日期选择器。这是一个行编辑，后跟一个弹出日历的日历图标。我希望能够从行编辑到下一个输入，跳过日历图标的链接。我的意思是它是一个通用的小部件，所以我不能硬编码下一个的id并调用.focus（）。我知道我可以在所有内容上设置tabindex属性，但这比我想要的更加手动。另外，iirc，它不会阻止它获得焦点，它只会将它放在Tab键顺序的末尾。

Answer 1

为该控件设置tabindex =“ - 1”，浏览器将从Tab键跳过该控件。

Answer 2

也许：

$("#your-calendar-icon").focus(function() {
  $(this).trigger("blur");
);

Answer 3

检查此资源：

• Getting, setting, and removing tabindex values with JavaScript
• jQuery Tabindex Plugin

Answer 4

或：

$("#your-calendar-icon").focus(function() {
    $(somethingElse).trigger("focus");
});

Answer 5

在日历图标周围使用div而不是链接。然后将日历事件附加到div。默认情况下，div不会是制表位。

Answer 6

如果总是在日历之后输入，那么为什么不呢：

$('#your-calendar-icon').focus( function() {
  $(this).next('input').focus();
} );

就个人而言，我会说，如果它是一个插件，你应该让下一个元素成为一个具有默认值的配置选项，并指定文档中的默认值。

Answer 7

正如@thetacom所说，你可以使用另一种类型的元素，一种不能获得焦点的元素。如果您仍想保留一些标签功能，可以尝试SkipOnTab。

  

SkipOnTab：一个jQuery插件，用于从前向标签顺序中豁免选定的表单字段。

只需将data-skip-on-tab="true"添加到您要跳过的日期选择器图标（或其他元素/容器）即可。您仍然可以单击以激活日期选择器或使用 shift - 选项卡返回并使用回车键。

请参阅the simple demo和the business case demo。