如何禁用通过键盘上下箭头切换单选按钮选中状态的功能？

核心结论 #

没有原生HTML属性可以直接禁用单选按钮的上下箭头切换功能，必须通过JavaScript实现。

具体实现代码 #

你可以给目标单选按钮组绑定keydown事件，当检测到上下箭头按键时阻止默认行为：

// 获取同一组的所有单选按钮，替换成你的单选按钮组name属性值
const radioButtons = document.querySelectorAll('input[type="radio"][name="your-radio-group"]');

radioButtons.forEach(radio => {
  radio.addEventListener('keydown', (e) => {
    // 38对应上箭头，40对应下箭头
    if (e.keyCode === 38 || e.keyCode === 40) {
      e.preventDefault();
    }
  });
});

如果单选按钮都在同一个容器内，用事件委托更高效：

const radioContainer = document.getElementById('radio-group-container');

radioContainer.addEventListener('keydown', (e) => {
  if (e.target.type === 'radio' && (e.keyCode === 38 || e.keyCode === 40)) {
    e.preventDefault();
  }
});

额外优化建议 #

除了禁用箭头切换，你还可以给API请求加上防抖处理，即使出现误操作导致的快速切换，也只会在用户停止操作后发送一次请求，从根源上减少无效请求：

let debounceTimer;

function fetchData(radioValue) {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
    // 这里写你的API调用逻辑
    console.log('发起API请求，参数：', radioValue);
  }, 300); // 300ms延迟，可根据业务需求调整
}

// 绑定单选按钮的change事件时调用防抖函数
radioButtons.forEach(radio => {
  radio.addEventListener('change', (e) => {
    fetchData(e.target.value);
  });
});

内容的提问来源于stack exchange，提问作者user1933205