如何在不使用 tabindex 的情况下进行 Tab 键切换时跳过项目?

发布于 2024-07-10 09:33:08 字数 324 浏览 12 评论 0原文

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

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

Is there a good way, in a javascript onfocus() handler, to trampoline the focus to the next item in the tab order, without having to manually enter the ID of the item that should be next?

I built an HTML date picker in Django/jQuery. It's a line edit followed by a calendar icon that pops up a calendar. I want to be able to tab from the line edit to the next input, skipping the link for the calendar icon. I mean for it to be a generalized widget, so I can't hardcode the id of whatever is next and call .focus(). I know I could set tabindex attributes on everything, but that's more manual than I'd like. Also, iirc, that wouldn't prevent it from taking the focus, it would just put it at the end of the tab order.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(7

谜兔 2024-07-17 09:33:08

为该控件设置 tabindex = "-1",浏览器将从选项卡中跳过该控件。

Set tabindex = "-1" for that control and browser will skip that control from tabbing.

白衬杉格子梦 2024-07-17 09:33:08

或许:

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

Maybe:

$("#your-calendar-icon").focus(function() {
  $(this).trigger("blur");
);
迷迭香的记忆 2024-07-17 09:33:08

或者:

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

or:

$("#your-calendar-icon").focus(function() {
    $(somethingElse).trigger("focus");
});
权谋诡计 2024-07-17 09:33:08

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

Use a div around the calendar icon instead of a link. Then attach your calendar events to the div. By default, the div won't be a tab stop.

心作怪 2024-07-17 09:33:08

正如 @thetacom 所说,您可以使用另一种类型的元素,即不获得焦点的元素。 如果您仍然想保留一些选项卡功能,您可以尝试SkipOnTab< /a>.

SkipOnTab:一个 jQuery 插件,用于免除选定的表单字段的向前 Tab 键顺序。

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

请参阅简单演示业务案例演示

As @thetacom says, you can just use another type of element, one that doesn't receive focus. In case you still want to keep some of the tab functionality, you can try SkipOnTab.

SkipOnTab: A jQuery plugin to exempt selected form fields from the forward tab order.

Just add data-skip-on-tab="true" to the date picker icon (or other elements/containers) you want to skip. You can still click to activate the date picker or go back using shift-tab and use the enter key.

See the simple demo and the business case demo.

粉红×色少女 2024-07-17 09:33:08

如果它始终是日历之后的输入,那么为什么不呢:就

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

我个人而言,我想说,如果它将成为一个插件,您应该将下一个元素设置为具有默认值的配置选项,并在文档。

If it's always going to be the input after the calendar then why not:

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

Personally, I'd say that if it's going to be a plugin you should just make the next element a configuration option that has a default, and specify the default in the docs.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文