Bootstrap 5.2表单Tab焦点无法定位至删除/添加按钮求助

问题根源在于你用了<span>标签做操作按钮——<span>是纯文本容器，默认不属于键盘可聚焦的交互式元素，所以Tab键会直接跳过它们。要让这些按钮支持键盘操作，只需要把<span>换成<button>，调整样式保持原有外观，再补充必要的功能逻辑即可。

修改要点： #

• 将删除🗑和添加+的<span class="input-group-text">替换为<button>，添加type="button"避免触发表单默认提交行为。
• 保留input-group-text类维持原有样式，新增光标样式提示交互性。
• 给按钮加aria-label属性，适配屏幕阅读器（无障碍优化）。
• 补充JavaScript实现删除、添加行的核心功能。

修改后的完整代码： #

<!doctype html>
<html lang="en">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/somethinggoodone/cdn/AniketPradhan_bootstrap.css">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
          integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
          crossorigin="anonymous"></script>
  <style>
    /* 让按钮和原input-group-text样式完全匹配 */
    .input-group-text.btn {
      border: none;
      background: transparent;
      cursor: pointer;
    }
    /* 聚焦时显示轮廓，明确键盘操作的当前焦点 */
    .input-group-text.btn:focus {
      outline: 2px solid #86b7fe;
      outline-offset: -2px;
    }
  </style>
</head>
<body>
  <div class="input-group mb-3">
    <button type="button" class="input-group-text btn" aria-label="删除当前行">🗑</button>
    <input type="text" aria-label="First name" class="form-control">
    <input type="text" aria-label="Last name" class="form-control">
    <button type="button" class="input-group-text btn" aria-label="添加新行">+</button>
  </div>

  <script>
    // 添加新行
    $(document).on('click', '[aria-label="添加新行"]', function() {
      const newRow = $(this).closest('.input-group').clone();
      newRow.find('input').val(''); // 清空新行输入框
      $(this).closest('.input-group').after(newRow);
    });

    // 删除当前行（至少保留一行）
    $(document).on('click', '[aria-label="删除当前行"]', function() {
      if ($('.input-group').length > 1) {
        $(this).closest('.input-group').remove();
      }
    });
  </script>
</body>
</html>

核心逻辑说明： #

1. 键盘可访问性：<button>是原生交互式元素，默认会被Tab键纳入聚焦序列，按下Enter或Space键就能触发点击事件，完美支持纯键盘操作。
2. 样式一致性：通过自定义CSS让按钮外观和原<span>完全一致，同时保留聚焦状态的视觉提示，让键盘用户清晰感知当前操作对象。
3. 无障碍适配：aria-label属性为屏幕阅读器提供按钮功能描述，符合无障碍设计标准。

内容的提问来源于stack exchange，提问作者Code Guy