我正在尝试编写一个Chrome扩展程序，该程序必须能够在输入字段的光标位置插入一个字符。

当输入是实际的HTMLInputElement（insertAtCaretInput从另一个堆栈答案中借用）时，这很容易：

function insertAtCaretInput(text) {
  text = text || '';
  if (document.selection) {
    // IE
    this.focus();
    var sel = document.selection.createRange();
    sel.text = text;
  } else if (this.selectionStart || this.selectionStart === 0) {
    // Others
    var startPos = this.selectionStart;
    var endPos = this.selectionEnd;
    this.value = this.value.substring(0, startPos) + text + this.value.substring(endPos, this.value.length);
    this.selectionStart = startPos + text.length;
    this.selectionEnd = startPos + text.length;
  } else {
    this.value += text;
  }
}

HTMLInputElement.prototype.insertAtCaret = insertAtCaretInput;

onKeyDown(e){
  ...
  targetElement = e.target;
  target.insertAtCaret(charToInsert);
  ...
}

但是，当输入实际上在HTML结构中以不同的方式表示时（例如，Facebook的<div>with<span>元素在奇怪的时间出现并合并），我不知道该如何可靠地做到这一点。当我开始与输入进行交互时，新字符会消失或更改位置，或者光标会跳到不可预测的位置。

用于Facebook（Chrome桌面页面，新帖子或消息输入字段）可编辑的HTML结构示例，<div>其中包含string Test ：

<div data-offset-key="87o4u-0-0" class="_1mf _1mj">
  <span>
    <span data-offset-key="87o4u-0-0">
      <span data-text="true">Test
      </span>
    </span>
  </span>
  <span data-offset-key="87o4u-1-0">
    <span data-text="true"> 
    </span>
  </span>
</div>

到目前为止，这是我最成功的尝试。我像这样扩展span元素（insertTextAtCursor也是从另一个答案中借来的）：

function insertTextAtCursor(text) {
  let selection = window.getSelection();
  let range = selection.getRangeAt(0);
  range.deleteContents();
  let node = document.createTextNode(text);
  range.insertNode(node);

  for (let position = 0; position != text.length; position++) {
    selection.modify('move', 'right', 'character');
  }
}

HTMLSpanElement.prototype.insertAtCaret = insertTextAtCursor;

并且由于触发按键事件的元素是a <div>，然后包含<span>元素，这些元素随后包含带有实际输入的文本节点，因此我找到了最深的<span>元素并对该元素执行insertAtCaret：

function findDeepestChild(parent) {
  var result = { depth: 0, element: parent };

  [].slice.call(parent.childNodes).forEach(function (child) {
    var childResult = findDeepestChild(child);
    if (childResult.depth + 1 > result.depth) {
      result = {
        depth: 1 + childResult.depth,
        element: childResult.element,
        parent: childResult.element.parentNode,
      };
    }
  });

  return result;
}

onKeyDown(e){
  ...
  targetElement = findDeepestChild(e.target).parent; // deepest child is a text node
  target.insertAtCaret(charToInsert);
  ...
}

上面的代码可以成功插入字符，但是当Facebook的后台框架尝试处理新值时，会发生奇怪的事情。我尝试了各种技巧，重新定位光标并插入<span>元素，类似于Facebook在插入内容上操纵dom时似乎正在发生的事情，但最终，所有这些都以一种或另一种方式失败。我想这是因为输入区域的状态保存在某处，并且与我的修改不同步。

你认为可以可靠地执行此操作吗？如果可以，如何执行？理想情况下，答案不是特定于Facebook，而是也可以在使用其他元素而不是HTMLInputElement作为输入字段的其他页面上使用，但我知道这不可能。