如何在textarea的dragover事件中获取插入符及额外光标位置？

我来直接给你实用的解决方案，针对你提出的两个问题：

1. 在dragover事件中获取插入符位置 #

浏览器并没有在dragover事件里直接提供插入符位置的属性，但我们可以通过鼠标坐标逆向计算。现代浏览器支持document.caretPositionFromPoint()方法，能根据鼠标坐标点获取对应的文本位置，具体实现如下：

const textarea = document.querySelector('textarea');
textarea.addEventListener('dragover', function(e) {
  e.preventDefault(); // 必须阻止默认行为，才能触发后续放置操作
  // 获取鼠标在页面中的坐标
  const { clientX, clientY } = e;
  // 根据坐标获取caret位置
  const caretPos = document.caretPositionFromPoint(clientX, clientY);
  
  if (caretPos && caretPos.offsetNode === this) {
    // offset就是相对于textarea的字符索引位置
    const insertPosition = caretPos.offset;
    console.log('当前插入符位置:', insertPosition);
  }
});

如果需要兼容旧版IE，可以改用document.caretRangeFromPoint()，然后通过range.startOffset获取索引，逻辑和上面一致。

2. 获取拖拽时的额外光标位置 #

你提到的“额外光标”其实就是浏览器预判的文本插入位置，和上面的插入符位置是同一个概念——这个光标就是根据鼠标位置计算出的插入点，所以上面的方法完全适用。

还有一种备选方案，通过选区对象来获取：

textarea.addEventListener('dragover', function(e) {
  e.preventDefault();
  const selection = window.getSelection();
  if (selection.rangeCount > 0) {
    const range = selection.getRangeAt(0);
    // 确保选区在当前textarea内
    if (range.startContainer === textarea) {
      const cursorPos = range.startOffset;
      console.log('额外光标位置:', cursorPos);
    }
  }
});

需要注意的是，拖拽过程中浏览器的选区状态可能有特殊处理，所以第一种通过鼠标坐标获取的方法稳定性更高。另外别尝试临时聚焦textarea然后读取selectionStart——这个方法在很多浏览器的拖拽状态下会失效，不推荐使用。

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