Bootstrap 如何使用箭头键而不是Tab键在按钮上导航

wz1wpwve 于 2022-12-08 发布在 Bootstrap

关注(0)|答案(2)|浏览(138)

我有一个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")

twitter-bootstrap

来源：https://stackoverflow.com/questions/73456628/how-to-navigation-on-buttons-using-arrow-keys-instead-of-tab

2条答案

按热度按时间

smdncfj31#

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')
    }
}

赞(0）回复(0）举报 2022-12-08

00jrzges2#

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()
    }
})

赞(0）回复(0）举报 2022-12-08

我来回答

Bootstrap 如何使用箭头键而不是Tab键在按钮上导航

2条答案

相关问题

热门标签

最新问答