Je n'ai trouvé de réponses nulle part, seulement des parties de la solution ou du puzzle, alors j'ai décidé de trouver la solution et de prouver que c'était possible. Lorsque vous exécutez le snippet ci-dessous, ne sélectionnez pas de bouton radio mais cliquez plutôt à proximité, puis appuyez sur la touche de tabulation, et vous verrez qu'il sélectionne le premier. Ensuite, il sélectionnera le deuxième, le troisième, etc.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="buttonArea" style="width:100%;height:100%;">
<label>Audi E-Tron</label><input type='radio' id='car1' name='car' value='Audi E-Tron'>
<label>Bolt EV</label><input type='radio' id='car2' name='car' value='Bolt EV'>
<label>Leaf EV</label><input type='radio' id='car3' name='car' value='Leaf EV'>
<label>Tesla Model 3</label><input type='radio' id='car4' name='car' value='Tesla Model 3'>
</div>
</body>
</html>
<script>
$(document).keydown(function(event) {
var car1 = document.getElementById("car1");
var car2 = document.getElementById("car2");
var car3 = document.getElementById("car3");
var car4 = document.getElementById("car4");
// 9 represents the tab keycode of the document keydown event.
event.preventDefault(); // this prevents the tab from doing its default action.
if(event.keyCode == 9 && car1.checked == false && car2.checked == false && car3.checked == false && car4.checked == false) {
car1.checked = true; // This checks the radio option.
}
else if (event.keyCode == 9 && car1.checked == true) {
car2.checked = true;
}
else if (event.keyCode == 9 && car2.checked == true) {
car3.checked = true;
}
else if (event.keyCode == 9 && car3.checked == true) {
car4.checked = true;
}
else if (event.keyCode == 9 && car4.checked == true) {
car1.checked = true;
}
car1.blur(); car2.blur(); car3.blur(); car4.blur();
})
</script>
