0
186
VistasHow to navigation on buttons using arrow keys instead of tab
I have a bootstrpa modal that has a table on it. I want to navigate on the buttons using arrow keys instead of tabs...
I have tried it using autofocus but is not working.
Javascript Code
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")
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
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')
}
}
·
Juan Pablo Isaza
Denunciar
0
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()
}
})
·
Juan Pablo Isaza
Denunciar
Responde la pregunta