Question

我有一个包含两种表单的页面。如果用户通过任一表单上的字段进行制表，我希望焦点保留在当前表单上，而不是跳转到下一个表单。

具体来说，一个表单位于页面主体上，另一个表单位于模态中。我正在解决的问题是，当用户到达模态窗体的末尾并继续按Tab键时，焦点移动到模态蒙版后面的窗体。

我可以想到javascript / jquery解决方案来解决这个问题，但我想知道我是否缺少任何原生的HTML途径。

Answer 1

问题的答案是在显示模态时禁用第一个表单上的html元素。这样，被禁用的元素将不会参与Tab键顺序。

参考：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex

Answer 2

尝试使用以下内容：

<html>
<head>
  <title>Controlling TAB Order</title>
</head> 
<body>
  <form>
    Field 1 (first tab selection):
    <input type="text" name="field1" tabindex=1 /><br />
    Field 2 (third tab selection):
    <input type="text" name="field2" tabindex=2 /><br /> 
    Field 3 (second tab selection):
    <input type="text" name="field3" tabindex=3 /><br />
  </form>
  <form>
    Field 1 (first tab selection):
    <input type="text" name="field1" tabindex=4 /><br />
    Field 2 (third tab selection):
    <input type="text" name="field2" tabindex=5 /><br /> 
    Field 3 (second tab selection):
    <input type="text" name="field3" tabindex=6 /><br />
  </form> 
</body>
</html>

范围选项卡顺序（tabindex）到特定表单

2 个答案: