如何用方向键而非Tab键导航Bootstrap模态框中的按钮

我有一个包含表格的Bootstrap模态框，希望使用方向键（而非Tab键）来导航其中的按钮，但尝试使用autofocus属性未能生效。

当前JavaScript代码

for (let i = 0; i < res.data.data.length; i++) {
    table__body.innerHTML += `<tr>
        <td id="english_name"> <p> ${res.data.data[i].english_name} </p></td>
        <td id="mrp_price"> <p> ${res.data.data[i].mrp_price} </p></td>
        <td id="sale_price"> <p> ${res.data.data[i].sale_price} </p></td>
        <td id="barcode"> <p> ${res.data.data[i].barcode} </p></td>
        <td id="tax_per" class="d-none"> <p> ${res.data.data[i].tax_per} </p></td>
        <td id="product_tax_id" class="d-none"> <p> ${res.data.data[i].product_tax_id} </p></td>
        <td id="product_unit_id" class="d-none"> <p> unit ${res.data.data[i].product_unit_id} </p></td>
        <td id="product_id" class="d-none" <p>  ${res.data.data[i].product_id} </p></td>
        <td id="purchase_price" class="d-none" <p>  ${res.data.data[i].purchase_price} </p></td>
        <td id="production_price" class="d-none" <p>  ${res.data.data[i].production_price} </p></td>
        <td id="franchise_price" class="d-none" <p>  ${res.data.data[i].franchise_price} </p></td>
        <input type="hidden" value="${res.data.data[i].point_value}" id="point_value" />
        <td><button type="button" onclick="productWithSameBarcode(this)"  id="focus_on_add_button${i + 1}" class="btn btn-primary">Add</button></td>
        </tr>`;
}

document.getElementById("call_modal").click();
let btn = document.getElementById("focus_on_add_button1")
console.log(btn.setAttribute('autofocus'))
console.log("focus set")

解决方法 #

1. 修复autofocus失效问题 #

模态框显示是异步过程，直接在触发点击后设置焦点会因为模态框未完全渲染而失效，必须监听Bootstrap模态框的shown.bs.modal事件，在模态框完全显示后再设置焦点：

// 替换成你的模态框实际ID
const modal = document.getElementById('modal');
modal.addEventListener('shown.bs.modal', function() {
  const firstBtn = document.getElementById('focus_on_add_button1');
  if (firstBtn) {
    firstBtn.focus(); // 直接调用focus()比设置autofocus属性更可靠
  }
});

// 触发模态框
document.getElementById("call_modal").click();

2. 实现方向键导航功能 #

给所有Add按钮绑定键盘事件，监听上下方向键切换焦点：

// 表格生成完成后执行这段代码
const addButtons = document.querySelectorAll('.btn-primary');

addButtons.forEach((btn, index) => {
  btn.addEventListener('keydown', function(e) {
    // 上方向键切换到上一个按钮
    if (e.key === 'ArrowUp') {
      e.preventDefault();
      const prevIndex = index - 1;
      if (prevIndex >= 0) {
        addButtons[prevIndex].focus();
      }
    }
    // 下方向键切换到下一个按钮
    if (e.key === 'ArrowDown') {
      e.preventDefault();
      const nextIndex = index + 1;
      if (nextIndex < addButtons.length) {
        addButtons[nextIndex].focus();
      }
    }
  });
});

3. 修正表格生成的语法错误 #

原代码中部分<td>标签未闭合，修正后代码：

for (let i = 0; i < res.data.data.length; i++) {
    table__body.innerHTML += `<tr>
        <td id="english_name"> <p> ${res.data.data[i].english_name} </p></td>
        <td id="mrp_price"> <p> ${res.data.data[i].mrp_price} </p></td>
        <td id="sale_price"> <p> ${res.data.data[i].sale_price} </p></td>
        <td id="barcode"> <p> ${res.data.data[i].barcode} </p></td>
        <td id="tax_per" class="d-none"> <p> ${res.data.data[i].tax_per} </p></td>
        <td id="product_tax_id" class="d-none"> <p> ${res.data.data[i].product_tax_id} </p></td>
        <td id="product_unit_id" class="d-none"> <p> unit ${res.data.data[i].product_unit_id} </p></td>
        <td id="product_id" class="d-none"> <p>  ${res.data.data[i].product_id} </p></td>
        <td id="purchase_price" class="d-none"> <p>  ${res.data.data[i].purchase_price} </p></td>
        <td id="production_price" class="d-none"> <p>  ${res.data.data[i].production_price} </p></td>
        <td id="franchise_price" class="d-none"> <p>  ${res.data.data[i].franchise_price} </p></td>
        <input type="hidden" value="${res.data.data[i].point_value}" id="point_value" />
        <td><button type="button" onclick="productWithSameBarcode(this)"  id="focus_on_add_button${i + 1}" class="btn btn-primary">Add</button></td>
        </tr>`;
}

内容的提问来源于stack exchange，提问作者swapnil mane