如何通过keypress事件选中input标签并激活输入状态

核心思路很简单：上下键导航阶段只维护当前定位项的状态（索引或者样式标记），不要提前触发input的聚焦，捕获到回车事件时，直接对当前定位的input元素调用聚焦方法，即可直接进入可输入状态。

具体实现步骤 #

• 上下键导航逻辑调整：导航切换时只更新当前定位项的索引，或者给当前项加专属标记类（比如is-nav-target），不要调用focus()，否则会提前进入输入状态，不符合交互预期。
• 回车事件绑定：直接在input列表的父容器上绑定键盘事件做委托，不需要给每个input单独绑定事件，判断按下的是回车键时，取到当前定位的input元素调用focus()即可激活输入。
• 体验优化：聚焦后如果input内已有内容，自动把光标定位到文本末尾，用户可以直接接续输入，不需要手动调整光标位置。

代码示例 #

HTML结构 #

<div class="input-group">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
</div>

JS逻辑（兼容已有的上下键导航） #

const inputContainer = document.querySelector('.input-group')
const inputEls = Array.from(inputContainer.querySelectorAll('input'))
// 该变量为上下键导航已在维护的当前选中项索引
let activeNavIndex = 0
// 初始化给第一个项加导航标记
inputEls[activeNavIndex].classList.add('is-nav-target')

inputContainer.addEventListener('keydown', (e) => {
  // 清除上一个项的导航标记
  inputEls[activeNavIndex].classList.remove('is-nav-target')

  // 原有上下键导航逻辑
  if (e.key === 'ArrowDown') {
    e.preventDefault()
    activeNavIndex = (activeNavIndex + 1) % inputEls.length
  }
  if (e.key === 'ArrowUp') {
    e.preventDefault()
    activeNavIndex = (activeNavIndex - 1 + inputEls.length) % inputEls.length
  }

  // 回车激活逻辑
  if (e.key === 'Enter') {
    e.preventDefault()
    const targetInput = inputEls[activeNavIndex]
    // 聚焦激活输入状态
    targetInput.focus()
    // 光标定位到文本末尾，优化输入体验
    const textLen = targetInput.value.length
    targetInput.setSelectionRange(textLen, textLen)
  }

  // 给新的导航项加标记
  inputEls[activeNavIndex].classList.add('is-nav-target')
})

注意事项 #

不建议用keypress事件做监听，keypress在部分浏览器对功能键的兼容有问题，统一在keydown阶段处理即可，触发时机更早，不会有输入延迟。如果之前的导航逻辑已经维护了activeNavIndex，完全不需要通过DOM查询类名找当前项，直接取索引对应元素即可，性能更好逻辑也更清晰。

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