jquery 模式对话框中的 Tabindex
我试图在使用 jquery 对话框显示的表单中的所有输入元素上设置选项卡索引。当前的行为是,当用户开始按 Tab 键(第一个元素设置为焦点,因此它是行中的第一个元素)时,他们可以按 Tab 键浏览所有控件。问题是他们可以继续使用 Tab 键切换到对话框后面的元素。
有没有一种方法可以防止这种情况发生,并且只能通过打开的对话框中的表单元素进行切换?
Im attempting to set the tab index on all the input elements in a form that is displayed with a jquery dialog. The current behavior is that when the user starts to tab (the first element is set to focus so that is the first in line) they can tab through the all the controls. The issue us that they can continue to tab to the elements behind the dialog.
Is there a way that I can prevent this from happening and ONLY tab through the form elements in the open dialog?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
我给你逻辑。你可以相应地编写代码。
在表单的最后一个元素上添加一个事件处理程序来处理按键事件。
在处理函数内,如果键不是 TAB,则必须返回 true,否则返回 false。
这意味着只有非 TAB 键才能在该字段上工作。
您可以通过 google 搜索选项卡的 ascii 代码。你谷歌代码来处理关键事件。
谢谢
I'm giving you the logic. you can write code accordingly.
On the last element of your form add an event handler to handle key press event.
Inside the handler function you have to return true if key is not TAB otherwise return false.
That means only non-TAB keys will work on that field.
You can google ascii code of tab. you google code to handle key events.
Thank You
计算你有多少个元素并设置它,以便如果你的 tabindex == numberOfTabs 它将重置为原始索引。
如果您需要在任何功能之外执行此操作,请使用隐藏输入执行此操作,
然后在 js 中进行选项卡事件访问并将 tabindexCurrent val() 更新为新的
count how many elements you have and set it so that if your tabindex == numberOfTabs that it will reset to the original index.
if you need to do this outside of any functionality etc do it with a hidden input
then in the js for the tab event access and update the tabindexCurrent val() to the new one
是的,这个问题有一个解决方案。我面临着同样的问题。
要使其正常工作,您必须使用
jquery.ui.dialog.js
...将其包含在您的页面上。还要在document.ready
中添加 jQuery 模式对话框代码。Yes, there is a solution to this problem. I was facing the same problem.
To make it work you have to use
jquery.ui.dialog.js
… include it on your page. Also add your jQuery modal dialog code indocument.ready
.