Hello.
There is a form with a mixture of input, multipleinput, date/time picker, and image uploader.
No matter what I try, I can’t use the tab key to focus on the next item.
Also, the header and footer items sometimes get focused.
Any wisdom on how to fix this?
Here are some things I’ve tried for reference.
(1) I have placed the elements in the order I want them to be specified by switching tabs.
(2) The input names are numbered in the order in which I want them to be specified in the tab switch.
(3) I entered the HTML part of the page as shown in the image below, and assigned IDs to each input.
<script>
window.addEventListener("load", (event) => {
document.getElementById("input-3").tabIndex = -3
document.getElementById("input-2").tabIndex = -2
document.getElementById("input-1").tabIndex = -1
document.getElementById("input1").tabIndex = 1
document.getElementById("input2").tabIndex = 2
document.getElementById("input3").tabIndex = 3
document.getElementById("input4").tabIndex = 4
document.getElementById("input5").tabIndex = 5
document.getElementById("input6").tabIndex = 6
document.getElementById("input7").tabIndex = 7
document.getElementById("input8").tabIndex = 8
document.getElementById("input9").tabIndex = 9
document.getElementById("input10").tabIndex = 10
document.getElementById("input11").tabIndex = 11
document.getElementById("input12").tabIndex = 12
document.getElementById("input13").tabIndex = 13
document.getElementById("input14").tabIndex = 14
document.getElementById("input15").tabIndex = 15
document.getElementById("input16").tabIndex = 16
document.getElementById("input17").tabIndex = 17
document.getElementById("input18").tabIndex = 18
document.getElementById("input19").tabIndex = 19
document.getElementById("input20").tabIndex = 20
document.getElementById("input21").tabIndex = 21
document.getElementById("input22").tabIndex = 22
document.getElementById("input23").tabIndex = 23
document.getElementById("input24").tabIndex = 24
document.getElementById("input25").tabIndex = 25
document.getElementById("input26").tabIndex = 26
document.getElementById("input27").tabIndex = 27
document.getElementById("input28").tabIndex = 28
document.getElementById("input29").tabIndex = 29
document.getElementById("input30").tabIndex = 30
document.getElementById("input31").tabIndex = 31
document.getElementById("input32").tabIndex = 32
document.getElementById("input33").tabIndex = 33
document.getElementById("input34").tabIndex = 34
})
</script>