如何实现在最后选中控件的光标位置插入指定文本

嘿，我完全懂你的需求啦！你已经搞定了在最后选中的控件里插入文本，甚至能在有选中内容时把文本插在选中区域的开头，但没选中任何内容的时候，还不知道怎么把文本精准放到光标所在的位置对吧？别急，我来帮你把这个doPaste函数补全～

首先，咱们得区分两种常见的可编辑控件：一种是<input>、<textarea>这类表单输入元素，另一种是设置了contenteditable="true"的普通元素。针对这两种情况，咱们分别处理，就能完美覆盖光标插入的需求了。

先给你看完善后的代码：

const doPaste = async(text) => {
  const selection = window.getSelection();
  const activeElement = document.activeElement;

  // 处理 input 和 textarea 元素
  if (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA') {
    const startPos = activeElement.selectionStart;
    const endPos = activeElement.selectionEnd;
    const currentValue = activeElement.value;

    // 把文本插入到光标位置（如果有选中内容，就替换选中的部分；没有的话直接插光标处）
    activeElement.value = currentValue.slice(0, startPos) + text + currentValue.slice(endPos);
    
    // 插入后把光标移到文本末尾，提升体验
    activeElement.selectionStart = activeElement.selectionEnd = startPos + text.length;
    activeElement.focus();
  } 
  // 处理 contenteditable 元素
  else if (activeElement.isContentEditable) {
    if (selection.rangeCount > 0) {
      const range = selection.getRangeAt(0);
      range.deleteContents(); // 删除选中的内容（如果有的话）
      const textNode = document.createTextNode(text);
      range.insertNode(textNode);

      // 插入后把光标移到文本末尾
      range.setStartAfter(textNode);
      range.setEndAfter(textNode);
      selection.removeAllRanges();
      selection.addRange(range);
    }
  }
};

我给你拆解下关键逻辑：

• 先拿到当前的选择对象selection和当前聚焦的控件activeElement，这俩是核心，确保咱们操作的是用户最后选中的那个控件。
• 对于input/textarea：直接用selectionStart和selectionEnd就能定位光标或选中范围的位置，把原内容切成前后两段，中间插入咱们要的文本就行，最后还能把光标移到插入文本的末尾，用户体验更好。
• 对于contenteditable元素：利用Range对象来操作，不管有没有选中内容，先清空选中的部分（如果有的话），然后创建文本节点插入到光标位置，最后调整光标到文本末尾。

这样修改后，不管控件是input、textarea还是可编辑的div，不管有没有选中内容，都能精准把文本插入到光标位置啦～

备注：内容来源于stack exchange，提问作者Amaryllis Chrysanthos