使用JavaScript Range实现输入框光标通过左右方向键逐字符移动

首先得说，你的思路方向是对的，但代码里有几个关键问题会导致功能失效，尤其是在IE11这种兼容性要求高的环境下，我帮你拆解下：

代码里的核心问题 #

• 变量引用错误：你用document.getElementById('numericinput')获取了元素存在inputDocument里，但后面却用了input.firstChild——这里input根本没定义，应该替换成inputDocument.firstChild。
• 方法调用遗漏括号：window.getSelection().removeAllRanges少了()，这会导致旧的选区没有被清除，新的Range无法正确生效。
• 局部变量与实例变量混淆：在左移的逻辑里，你判断的是局部的iCaretPos > 0，但局部变量初始值是0，永远不会满足这个条件，应该用实例变量this.iCaretPos。
• Range设置逻辑错误：range.setEnd(input.firstChild, 0)这行完全没必要，而且会打乱光标位置；正确的做法是把Range的start和end都设置到目标光标位置，然后折叠。
• 未阻止默认行为：没有调用event.preventDefault()，浏览器自带的光标移动逻辑会和你的自定义逻辑冲突，导致光标位置混乱。

针对不同输入场景的修正代码 #

场景1：你的输入框是contenteditable元素（比如带编辑功能的div） #

如果是这种情况，适配IE11的修正代码如下：

// 在组件类中定义方法，模板里绑定 (keydown)="handleCaretMove($event)"
handleCaretMove(event: KeyboardEvent) {
  const key = event.which || event.keyCode;
  // 只处理左右方向键
  if (![37, 39].includes(key)) return;

  event.stopPropagation();
  event.preventDefault(); // 必须阻止默认行为，避免冲突

  const inputElement = document.getElementById('numericinput') as HTMLElement;
  if (!inputElement || !inputElement.firstChild) return;

  // 确保实例变量iCaretPos已初始化（比如在ngOnInit里设为0）
  const contentLength = inputElement.textContent?.length || 0;

  if (key === 39) {
    // 右移：不能超过文本长度
    this.iCaretPos = Math.min(this.iCaretPos + 1, contentLength);
  } else {
    // 左移：不能小于0
    this.iCaretPos = Math.max(this.iCaretPos - 1, 0);
  }

  const selection = window.getSelection();
  const range = document.createRange();
  // 将光标定位到目标位置
  range.setStart(inputElement.firstChild, this.iCaretPos);
  range.collapse(true); // 折叠为光标

  // 更新选区
  selection.removeAllRanges();
  selection.addRange(range);
}

场景2：你的输入框是普通的<input>标签 #

如果是普通input，其实不用复杂的Range操作，IE11支持input的selectionStart和selectionEnd属性，代码更简洁：

handleCaretMove(event: KeyboardEvent) {
  const key = event.which || event.keyCode;
  if (![37, 39].includes(key)) return;

  event.stopPropagation();
  event.preventDefault();

  const inputElement = document.getElementById('numericinput') as HTMLInputElement;
  if (!inputElement) return;

  let caretPos = inputElement.selectionStart ?? 0;

  if (key === 39) {
    caretPos = Math.min(caretPos + 1, inputElement.value.length);
  } else {
    caretPos = Math.max(caretPos - 1, 0);
  }

  // 设置光标位置
  inputElement.selectionStart = caretPos;
  inputElement.selectionEnd = caretPos;
}

额外的IE11兼容注意事项 #

• 如果是contenteditable元素，当内容为空时，要先插入一个空文本节点（inputElement.appendChild(document.createTextNode(''))），不然firstChild会是null，导致Range无法创建。
• 实例变量this.iCaretPos一定要在组件初始化时赋值（比如ngOnInit里this.iCaretPos = 0;），避免undefined引发的计算错误。

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