javascript - 将文件拖放到 Chrome 的 textarea 中时获取光标位置

Question

当您从 OS 文件系统中将文件拖动到文本区域或文本输入上时，鼠标指针附近会出现一个光标(这与 positionStart 不同)，向用户显示拖动的内容将插入的位置。
更新:这是一张图片，我将一个文件(test.sh)拖到文本输入上。如果“文本”字的中间，您可以看到放置光标。选择光标位于字符串的末尾(在此图片上不可见)。

(Chrome 的默认行为是打开删除的文件，但我在 drop 事件中覆盖了此行为。我想在文本区域中插入文件名。)
我试图在 drop 时获得这个位置(根据 textarea 值字符串中的索引)发生。任何想法？

Answer 1

呼，你想做的并不容易，因为没有办法引用这个特定的插入符号!
在我的脑海中，你只能通过繁重的变通方法来实现这一点:你可以在 drop 上获得什么发生的是鼠标光标位置。
您必须制作一个与 textarea 在形状、文本大小、边距等方面相同的不可见 div 克隆，从而自动填充来自您的 textarea 的文本。
接下来，您必须为此 div 中的每个可能的插入符号位置(即文本的每个字符 1 个跨度)创建一个跨度，并获取每个跨度的 x 和 y 坐标并将它们保存到一个数组中。

.txtarea {
  width: 300px;
  height: 150px;
  font-size: 12px;
  font-family: Arial;
  padding: 5px;
  text-align: left;
  border: 1px solid red;
}

<textarea class="txtarea">Mytext</textarea>

<!--just an example, auto-fill this content through a JS oninput event -->
<div class="txtarea"><span>M</span><span>y</span><span>t</span><span>e</span><span>x</span><span>t</span></div>

然后，在 drop发生时，获取事件的鼠标坐标，将它们与坐标数组进行比较，approximate the closest x/y position并设置一个新的selectionStart在你的textarea中建立索引，插入文件名，然后恢复之前的selectionStart。