如何在不使用 tabindex 的情况下进行 Tab 键切换时跳过项目?
在 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(7)
为该控件设置 tabindex = "-1",浏览器将从选项卡中跳过该控件。
Set tabindex = "-1" for that control and browser will skip that control from tabbing.
或许:
Maybe:
或者:
or:
检查此资源:
Check this resources:
在日历图标周围使用 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.
正如 @thetacom 所说,您可以使用另一种类型的元素,即不获得焦点的元素。 如果您仍然想保留一些选项卡功能,您可以尝试SkipOnTab< /a>.
只需将
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.
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.
如果它始终是日历之后的输入,那么为什么不呢:就
我个人而言,我想说,如果它将成为一个插件,您应该将下一个元素设置为具有默认值的配置选项,并在文档。
If it's always going to be the input after the calendar then why not:
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.