如何实现按下/键自动将光标定位到input输入框并过滤输入的/字符

核心问题解决思路 #

你需要的两个功能都可以用非常简洁的方式实现，不需要额外开发定时器删字符的逻辑：

• 自动定位光标到输入框，直接调用输入框元素的focus()方法即可
• 避免/字符被录入输入框，只需要在匹配到按键为/时调用evt.preventDefault()，阻止按键的默认输入行为即可

额外优化点 #

需要额外加一层判断：当用户已经在输入框内输入内容时，不要触发这个快捷键逻辑，否则用户正常输入/字符会被拦截，影响正常使用。

完整可运行代码 #

HTML #

<input id="inputBar" placeholder="按 / 键快速聚焦搜索" />

CSS #

#inputBar {
  position: absolute;
  top: 2%;
  left: 3%;
}

JS #

document.onkeypress = function(evt) {
  evt = evt || window.event;
  // 判断当前是否已经在输入框内聚焦，是则直接返回不处理快捷键逻辑
  const activeEl = document.activeElement;
  if (activeEl && activeEl.id === 'inputBar') return;

  const charCode = evt.keyCode || evt.which;
  const charStr = String.fromCharCode(charCode);
  if (charStr === '/') {
    // 阻止按键默认输入行为，从根源避免/字符被录入
    evt.preventDefault();
    // 聚焦输入框，自动定位光标
    document.getElementById("inputBar").focus();
  }
};

逻辑说明 #

• document.activeElement可以拿到当前页面处于聚焦状态的元素，加这个判断可以避免干扰用户在输入框内的正常输入
• evt.preventDefault()直接阻断了按键的默认输入行为，完全不会产生/字符，比事后删除字符的方案更高效，也不会出现字符闪烁的问题

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