Editable Grid（View）单元格聚焦时如何将光标移动到上一个/下一个字符

现有可编辑网格默认行为：单元格处于聚焦状态时，按下左/右方向键会直接跳转至上一个/下一个字段，无法控制单元格内的文本光标移动。以下是两种可行的实现方案：

• 方案一：编辑状态下覆盖默认方向键逻辑
  该方案符合普通用户的操作直觉，不需要额外记忆快捷键：

  • 触发规则：单元格未激活编辑时，保留原有方向键跳转字段的导航逻辑；当用户双击单元格、按下Enter/F2激活文本编辑状态后，自动拦截左右方向键的冒泡事件，阻止字段跳转，让方向键仅控制单元格内的文本光标前后移动
  • 退出规则：按下ESC/Enter退出编辑模式后，自动恢复默认的方向键跳转行为
  • 前端核心实现逻辑参考：

    // 监听可编辑网格的键盘事件
    document.querySelector('.editable-grid').addEventListener('keydown', (event) => {
      const activeEditCell = document.activeElement.closest('[role="gridcell"][contenteditable="true"], .grid-cell-input');
      // 仅编辑状态下拦截左右方向键
      if (activeEditCell && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
        event.stopPropagation();
        // 原生输入框会自动处理光标移动，不需要额外代码
      }
    })
    

• 方案二：保留原有默认行为，新增组合快捷键
  如果不想改动用户已经习惯的默认导航逻辑，可以新增组合快捷键实现单元格内光标移动：

  • Windows/Linux平台：Alt + ← 光标左移一个字符，Alt + → 光标右移一个字符
  • macOS平台：Option + ← 光标左移一个字符，Option + → 光标右移一个字符
  • 实现逻辑：监听对应组合键事件，手动修改输入框的selectionStart和selectionEnd属性调整光标位置即可

优先推荐使用方案一，无需额外记忆快捷键，同时也不会打乱表格全局导航的操作逻辑。

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