按下数字、字母或符号键时如何将焦点移至HTML <input>元素

你可以通过监听全局的keydown事件，过滤掉功能按键后主动调用input元素的focus()方法实现需求，核心逻辑是判断当前按键是否为可输入字符，且当前没有其他输入框处于聚焦状态。

完整示例代码 #

<input type="text" id="targetInput" placeholder="输入内容">

<script>
// 监听全局按键事件
document.addEventListener('keydown', (e) => {
  // 跳过已经聚焦在目标输入框的场景，避免打断正常输入
  if (document.activeElement === document.getElementById('targetInput')) return

  // 过滤功能按键：修饰键、F系列功能键、回车等非输入按键
  const isFunctionKey = e.ctrlKey || e.altKey || e.metaKey || e.key.length > 1
  if (isFunctionKey) return

  // 符合触发条件时切换焦点到目标输入框
  const input = document.getElementById('targetInput')
  input.focus()

  // 可选逻辑：将当前按下的字符自动填入输入框，避免第一次按下的字符丢失
  input.value += e.key
  // 将光标移动到输入内容末尾
  input.setSelectionRange(input.value.length, input.value.length)
  // 阻止默认事件，避免字符重复输入
  e.preventDefault()
})
</script>

逻辑说明 #

• 首先判断当前是否已经聚焦在目标input上，如果是就不执行后续逻辑，避免影响正常输入
• 功能按键的判断逻辑：key长度大于1的基本都是功能键（比如F1的key值为"F1"，回车的key值为"Enter"，长度都大于1），再加上修饰键（Ctrl、Alt、Command等）的判断，就可以过滤掉所有不需要触发的按键
• 如果你不需要第一次按下的字符自动填入输入框，只需要保留focus()调用，删掉后续字符补入、光标移动、阻止默认事件的代码即可

内容的提问来源于stack exchange，提问作者Fun X Time