如何阻止<select>标签按下Enter键时展开<option>选项

嘿，这个需求很好实现，咱们只需要拦截<select>元素上的Enter键事件，阻止它的默认行为就行。下面是具体的实现方案：

原生JavaScript实现 #

首先是基础的单个<select>的处理：

HTML结构 #

<select id="restrictedSelect">
  <option>选项A</option>
  <option>选项B</option>
  <option>选项C</option>
</select>

JavaScript代码 #

// 获取目标select元素
const mySelect = document.getElementById('restrictedSelect');

// 绑定键盘按下事件
mySelect.addEventListener('keydown', function(e) {
  // 检测是否按下的是Enter键
  if (e.key === 'Enter') {
    // 阻止浏览器默认的展开下拉行为
    e.preventDefault();
  }
});

如果你的页面上有多个<select>都需要这个限制，推荐用类选择器来批量处理：

批量处理的代码 #

<!-- 给需要限制的select添加统一的类名 -->
<select class="no-enter-expand">
  <option>选项1</option>
  <option>选项2</option>
</select>
<select class="no-enter-expand">
  <option>选项X</option>
  <option>选项Y</option>
</select>

// 获取所有带指定类名的select元素
const selectElements = document.querySelectorAll('.no-enter-expand');

// 遍历绑定事件
selectElements.forEach(select => {
  select.addEventListener('keydown', function(e) {
    if (e.key === 'Enter') {
      e.preventDefault();
    }
  });
});

原理说明 #

当<select>获得焦点后，浏览器默认会在按下Enter键时触发展开下拉列表的行为。我们通过keydown事件监听这个操作，一旦检测到Enter键被按下，就调用e.preventDefault()来取消这个默认行为，这样就只能通过鼠标点击来打开下拉列表了。

小贴士：如果需要兼容非常老旧的浏览器，可以把e.key === 'Enter'替换成e.keyCode === 13，不过现在主流浏览器都支持e.key的写法，可读性更强。

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