jQuery键盘导航无法选中文本问题求助

我完全懂你遇到的麻烦——用键盘在成绩表的输入框之间跳转时，没法自动选中框里的原有文本，每次改成绩都得先删除内容，效率太低了。咱们来一步步把这个问题搞定。

问题分析 #

你现有的代码里，focus事件绑定和键盘导航的逻辑可能存在两个核心问题：

1. 直接绑定input:text的focus事件，如果表格是动态生成的（比如异步加载学生数据），新添加的输入框不会触发这个事件；
2. 部分浏览器会在focus事件后自动重置光标位置，直接调用select()会被默认行为覆盖；
3. 键盘导航时可能没有正确阻止默认滚动行为，导致聚焦目标输入框的时机不对。

修正后的CoffeeScript代码 #

# 用事件委托绑定focus事件，兼容动态生成的输入框
$('#scoreTable').on 'focus', 'input:text', ->
  # 延迟10ms执行select，避开浏览器默认光标行为
  setTimeout =>
    $(this).select()
  , 10

# 初始化聚焦第一个输入框，用jQuery方法保持风格统一
if $('#scoreTable').length > 0
  $('#r0c0').focus()

# 完善键盘导航逻辑
$(".some_cell").keydown (e) ->
  $currentCell = $(this)
  currentRow = parseInt($currentCell.attr("cell_row"))
  currentCol = parseInt($currentCell.attr("cell_col")) # 假设你给单元格加了cell_col属性
  $nextInput = null

  # 根据按键方向计算目标输入框
  switch e.which
    # 上箭头
    when 38
      $nextInput = $("#r#{currentRow - 1}c#{currentCol}")
    # 下箭头
    when 40
      $nextInput = $("#r#{currentRow + 1}c#{currentCol}")
    # 左箭头
    when 37
      $nextInput = $("#r#{currentRow}c#{currentCol - 1}")
    # 右箭头
    when 39
      $nextInput = $("#r#{currentRow}c#{currentCol + 1}")

  # 如果找到目标输入框，阻止默认滚动并聚焦
  if $nextInput?.length > 0
    e.preventDefault()
    $nextInput.focus()

关键修改点说明 #

• 事件委托：用$('#scoreTable').on('focus', 'input:text', ...)替代直接绑定，确保后续动态添加的输入框也能触发选中逻辑；
• 延迟选中：setTimeout延迟10ms执行select()，解决Chrome等浏览器中默认光标行为覆盖选中状态的问题；
• 阻止默认行为：键盘导航时调用e.preventDefault()，避免页面随箭头键滚动，确保聚焦目标输入框的操作不受干扰；
• 统一jQuery风格：把原生document.getElementById换成jQuery选择器，保持代码一致性。

额外调试建议 #

1. 打开浏览器开发者工具的控制台，在focus事件里加console.log('focus triggered')，确认事件是否正常触发；
2. 如果输入框是异步加载的，确保事件绑定代码在DOM渲染完成后执行（比如放在$(document).ready()里）；
3. 测试不同浏览器（Chrome、Firefox、Edge），如果还有问题，可以尝试把延迟时间调整到20ms。

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