如何让HTML搜索输入框通过快捷键获焦？有无替代JS全局监听方案？

Great question! I totally get wanting a cleaner alternative to clunky global keystroke listeners—let’s break down your options:

首先得明确：HTML原生的accesskey属性虽然能实现快捷键触发，但它的修饰键是由浏览器和操作系统决定的（比如Mac上Chrome用Cmd+Alt+按键，Firefox用Cmd+Shift+按键），没法直接指定你想要的Meta+S组合。所以如果必须用这个特定快捷键，还是得用JS，但可以写得更简洁、更有针对性，而非“监听所有按键”的笨重写法。

这里有几个优化思路：

• 精准监听目标组合键，避免冗余处理
  不用给整个document绑定一个大而全的监听函数，而是直接写只处理Meta+S的逻辑，同时阻止默认行为（比如Cmd+S默认是保存页面，得先拦截）：

  document.addEventListener('keydown', (e) => {
    // 检测是否按下Meta键（Mac的Cmd/Windows的Win）+ S
    if (e.metaKey && e.key === 's') {
      e.preventDefault(); // 阻止默认的页面保存行为
      document.getElementById('search-input').focus(); // 聚焦搜索框
    }
  }, { passive: false }); // 需要设置passive: false才能调用preventDefault
  

  这个写法已经非常针对性了——只有当用户按下准确的组合键时才会触发逻辑，不会处理其他按键事件。

• 缩小监听范围，优化语义化
  如果页面结构清晰，可以把监听事件绑定到搜索框所在的父容器，而非整个document，这样事件冒泡的范围更小，代码也更贴合语义：

  document.querySelector('.search-wrapper').addEventListener('keydown', (e) => {
    if (e.metaKey && e.key === 's') {
      e.preventDefault();
      document.getElementById('search-input').focus();
    }
  }, { passive: false });
  

• 结合accesskey做兼容性降级
  如果你想兼顾原生快捷键的兼容性，可以给搜索框加上accesskey属性，作为Meta+S的备选方案，同时保留自定义快捷键逻辑：

  <input type="search" id="search-input" accesskey="s" placeholder="按Cmd+S或浏览器默认快捷键搜索">
  

  这样不同平台的用户可以用浏览器默认的accesskey组合键，而你自定义的Meta+S逻辑作为更直观的快捷键补充。

另外提一句：如果想跨平台兼容Windows用户的习惯（他们更常用Ctrl+S），可以把条件改成(e.metaKey || e.ctrlKey) && e.key === 's'，体验会更友好。

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