如果我单击文档中的任何其他 HTML 控件，tabIndex 将无法正常运行

tabIndex does not behave properly if I click on any other HTML control in the document

本文关键字：tabIndex 控件 正常运行 HTML 其他 单击 文档 任何 如果      更新时间：2023-09-26

我正在尝试在我的 html 页面中添加 tabindex 来控制 tabbing 行为，我在所需的 html 控件中添加了 tabindex，在页面加载时，我将焦点发送到第一个控件（inp 1）。

只要我不单击任何其他控件，选项卡行为就会

根据要求工作，但是如果用户单击任何其他控件，选项卡行为就会中断。

法典：

<table>
    <tr>
        <td><input type="text" tabindex="1" placeholder="inp 1"/></td>
        <td><input tabindex="-1" type="text" placeholder="inp 2"/></td>
        <td><input type="text" placeholder="inp 3" /></td>
        <td><input tabindex="2" type="text" placeholder="inp 4"/></td>
    </tr>
</table>

正常制表符行为：inp 1 -> inp 4

如果用户单击任何其他控件，假设 inp 2 或 inp 3，然后按 tab 键，它应该转到 inp 4

有什么办法吗？请帮忙。

谢谢

如何使用 Javacript/jQuery 的示例：

    $("[data-tabto]").keydown(function(e) {
      if (e.which === 9) {
        var target = $(this).data("tabto");
        $(target).focus();
        e.preventDefault();
      }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input type="text" id="inp1" data-tabto="#inp4" placeholder="inp 1"/></td>
    <td><input type="text" id="inp2" data-tabto="#inp4" placeholder="inp 2"/></td>
    <td><input type="text" id="inp3" data-tabto="#inp4" placeholder="inp 3" /></td>
    <td><input type="text" id="inp4" placeholder="inp 4"/></td>
  </tr>
</table>

将tabindex="-2"添加到第三个输入元素：例如

相关文章：