https://dev.to/phuocng/calculate-the-coordinates-of-the-current-cursor-in-a-text-area-cle

知道光标在文本区域中的位置在各种现实生活中非常有用。例如，输入 @ 或 # 时，我们可以显示当前位置提及人物或标签的列表菜单。

这在实现代码编辑器时尤为重要，因为代码编辑器通常具有自动补全和语法高亮等功能，需要了解光标位置才能正常工作。

总体而言，了解当前光标位置可以极大提升网页应用的用户体验和功能。

在这篇文章中，让我们学习如何计算当前光标在文本区域中的坐标。这是一个简单的过程。

首先，我们需要利用 selectionStart 属性确定光标在文本区域中的位置，该属性给出第一个选中字符的索引。

const textarea = document.getElementById("textarea");
const cursorPos = textarea.selectionStart;

接下来，我们将镜像元素分为三部分：一个文本节点，包含从开始到光标位置的内容；一个代表光标的span元素；以及另一个文本节点，包含从光标位置到结束的剩余内容。

为了获取光标前后文本，我们将使用文本区域的 substring 方法。我们将起始索引设置为 0，结束索引设为光标位置变量，以获得光标之前的文本。然后，我们将光标位置作为参数传递给 substring 方法，以提取光标后的文本。

const textBeforeCursor = textarea.value.substring(0, cursorPos);
const textAfterCursor = textarea.value.substring(cursorPos);

提取文本后，我们创建三个节点并将其附加到镜像元素上：

const pre = document.createTextNode(textBeforeCursor);
const post = document.createTextNode(textAfterCursor);
const caretEle = document.createElement('span');
caretEle.innerHTML = ' ';

mirroredEle.innerHTML = '';
mirroredEle.append(pre, caretEle, post);

在这个例子中，我们使用 createTextNode 函数创建包含特定内容的文本节点。然后，我们用 createElement 方法创建代表 span 的元素 ，并输入 span 作为参数。

这里有趣的地方在于：我们将span元素的设置为 ，一个代表非换行空格的HTML实体。这样我们就能看到span元素在文本区域中的位置。否则，span元素将是不可见的。

之后，我们清除镜像元素，并使用 append() 按正确顺序添加元素。

我们不像使用 appendChild() 那样常用 append() 函数。如果你对这两个函数之间的区别感兴趣，看看这篇帖子。值得一读！

最后，我们使用 getBoundingClientRect() 来获取我们的 span 元素的坐标。这个方法返回一个具有 top、left、bottom 和 right 等属性的对象。

const rect = caretEle.getBoundingClientRect();
coordinatesButton.innerHTML = `Coordinates: (${rect.left}, ${rect.top})`;

通过这些简单步骤，我们可以准确计算光标当前在文本区域内的位置坐标。

想试试看，只需点击下面的文本区域，然后点击底部的按钮即可。