根据 x 和 y 坐标将插入符号设置为最近的可能位置答案

【问题标题】：Set caret to nearest possible position based on an x and y coordinate根据 x 和 y 坐标将插入符号设置为最近的可能位置
【发布时间】：2021-05-24 18:27:53
【问题描述】：

如何根据 x 和 y 坐标将插入符号位置（文本光标）设置为最近的可能位置？整个html文档都有document.designMode = "on"设置。

我找到了一些东西来获取当前的 X 和 Y 坐标，但是我该如何反转这个场景呢？

let sel = window.getSelection();
let range = sel.getRangeAt(0);

console.log(range.getClientRects());

我正在寻找必须在 Microsoft WebView2/Edge 中工作的普通 javascript。将文件拖到此 html 文档上时，插入符号的位置会完全按照我的要求更改（但我不能使用此拖动操作）。

【问题讨论】：

要根据鼠标坐标插入光标吗？如果您设置了 document.designMode = "on"，那么当您单击编辑时会自动设置光标。我也在 WebView2 中进行了测试，它可以正常工作。你遇到了什么问题？
我有一个外部拖动事件，想跟随光标位置。我可以在鼠标移动时执行一些 javascript。浏览器无法直接处理拖动事件。 WebView2 作为编辑器嵌入到具有内部拖动功能的丰富的 delphi 应用程序中。

【解决方案1】：

我找到了解决办法：

function moveCaret(x, y) {
  let sel = window.getSelection();
  sel.removeAllRanges();
  sel.addRange(document.caretRangeFromPoint(x, y));
}

该函数将插入符号移动到最近的可能位置。在 Opera、Edge 或 Chrome 等铬浏览器上测试。

我在堆栈溢出时在这里找到了一个跨浏览器解决方案（在知道caretRangeFromPoint 函数的名称之后）。如果您正在寻找跨浏览器解决方案，请看这里：https://stackoverflow.com/a/11191372/1635166

【讨论】：