如何使用箭头键而不是选项卡在按钮上导航

Question

我有一个 bootstrpa 模态，上面有一个表格。 我想使用箭头键而不是标签来导航按钮...

我已经尝试使用自动对焦但无法正常工作。

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")

Answer 1

document.onkeydown = (e) => {
    if (e.keyCode === 38) {
        console.log('up arrow pressed')
    } else if (e.keyCode === 40) {
        console.log('down arrow pressed')
    } else if (e.keyCode === 37) {
        console.log('left arrow pressed')
    } else if (e.keyCode === 39) {
        console.log('right arrow pressed')
    }
}

Answer 2

let count = 0;
let buttons = document.getElementsByClassName("focus_on_add_button")
window.addEventListener('keydown', (e) => {
    const dec = () => {
        count == 0 ? count = 0 : count--
        buttons[count].focus()
    }
    const inc = () => {
        count++
        buttons[count].focus()
    }
    if (e.key == "ArrowUp") {
        dec()
    }
    else if (e.key == "ArrowDown") {
        inc()
    }
})