监听body keypress事件按/聚焦搜索框时自动填入/字符如何解决

这个bug的成因很简单：你只执行了搜索框聚焦的逻辑，没有拦截斜杠键本身的默认输入行为。斜杠键触发的字符输入动作会在你的事件回调执行完成后触发，这时候搜索框已经拿到焦点，/自然就被输入进去了。

在判定按下斜杠键的分支里，调用事件对象的preventDefault()方法，阻止按键默认的字符输入行为即可。
额外建议补充一层判断：如果用户当前已经在输入框、文本域这类可编辑元素里输入内容，就不要触发这个快捷键逻辑，否则会干扰用户正常输入。

修复后的代码参考：

document.body.onkeypress = (e) => {
  // 当前焦点在可输入元素上时，不触发快捷键
  const activeElTag = document.activeElement.tagName.toLowerCase()
  if (['input', 'textarea'].includes(activeElTag)) return

  // 匹配斜杠键，优先用e.key判断可读性更好，不需要记键码值
  if (e.key === '/' || e.which === 47) {
    e.preventDefault() // 核心：拦截斜杠的默认输入行为
    searchInput.focus()
  }
}

如果后续改用keydown事件实现同类全局快捷键，也需要做相同的默认事件拦截，否则依然会出现字符意外输入的问题。

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