如何使用键盘箭头禁用单选按钮选择的更改？

Question

我有一个带有 6 个单选按钮的 HTML 表单。每个单选按钮在被选中时都会对后端进行 API 调用并获取一些数据以填充表单中的下一个选择输入。如果选择一个单选按钮，然后按住向上或向下箭头键，则单选按钮选择循环速度非常快，我们会看到对后端进行大量 API 调用。有没有办法使用向上/向下箭头禁用无线电选择？或者我必须通过 JavaScript 来阻止它吗？

Answer 1

无法使用 HTML（据我所知）禁用箭头键进行选择，但您可以使用 JavaScript 来做到这一点。

下面是一个工作示例：

const radioButtons = document.querySelectorAll('input[type="radio"]');

radioButtons.forEach(radio => {
  radio.addEventListener('keydown', function(event) {
    if (event.keyCode === 37 || event.keyCode === 38 || event.keyCode === 39 || event.keyCode === 40) {
      event.preventDefault();
    }
  });
});

<form>
  <input type="radio" id="option1" name="option" value="1">
  <label for="option1">Option 1</label><br>
  <input type="radio" id="option2" name="option" value="2">
  <label for="option2">Option 2</label><br>
</form>

说明：这会循环所有单选按钮并侦听按键事件。然后我们检查按下的键是否是方向键之一。如果是，则阻止默认事件。