如何通过方向键在输入框逐字符移动光标？代码异常求助

需要在keydown事件中通过左（ArrowLeft）、右（ArrowRight）方向键，在输入框内逐字符移动光标/插入符。

最初实现代码：

const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
  if (e.key === 'ArrowLeft') {
    e.stopPropagation();

    e.currentTarget.setSelectionRange(
      e.currentTarget.value.length,
      e.currentTarget.value.length - 1,
    );

    e.currentTarget.focus();
  }
};

return <MyCustomInputField onKeyDown={handleKeyDown}/>;

当前问题：按下左箭头键一次，光标会向左移动两个字符，且后续按键无效果。

后续更新代码：

if (e.key === 'ArrowLeft') {
  e.stopPropagation();
  e.currentTarget.setSelectionRange(
    e.currentTarget.selectionStart,
    e.currentTarget.selectionStart - 1,
  );
  e.currentTarget.focus();
}

if (e.key === 'ArrowRight') {
  e.stopPropagation();
  e.currentTarget.setSelectionRange(
    e.currentTarget.selectionStart,
    e.currentTarget.selectionStart + 1,
  );
  e.currentTarget.focus();
}

此时问题：右方向键可正常工作，但左方向键仍会使光标向左移动两个字符。

核心问题 #

你只调用了e.stopPropagation()阻止事件冒泡，但没有阻止浏览器对方向键的默认行为。按下左箭头时，浏览器会自动执行一次光标左移，再加上你代码里手动设置的左移，就导致了一次按键移动两个字符的现象。

修正方案 #

在处理方向键事件时，同时调用e.preventDefault()禁用浏览器的默认光标移动行为；另外要处理边界情况，避免光标位置出现无效值。

修正后的完整代码：

const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
  const input = e.currentTarget;
  const { selectionStart } = input;

  if (e.key === 'ArrowLeft') {
    e.stopPropagation();
    e.preventDefault(); // 关键：阻止默认行为
    // 光标不在最左侧时才左移
    if (selectionStart > 0) {
      input.setSelectionRange(selectionStart - 1, selectionStart - 1);
    }
    input.focus();
  } else if (e.key === 'ArrowRight') {
    e.stopPropagation();
    e.preventDefault(); // 阻止右箭头默认行为
    // 光标不在最右侧时才右移
    if (selectionStart < input.value.length) {
      input.setSelectionRange(selectionStart + 1, selectionStart + 1);
    }
    input.focus();
  }
};

return <MyCustomInputField onKeyDown={handleKeyDown}/>;

补充说明 #

• setSelectionRange的两个参数需要保持一致，这样才能设置单一光标位置（而非选中一段文本）。之前左箭头的参数设置会选中一段区域，可能导致后续交互异常。
• 边界判断能避免光标位置超出输入框内容的范围，提升交互稳定性。

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