如何在 HTML 文本区域中找到光标位置（X/Y，而不是行/列）？ [复制]

Posted 2023-05-07

【中文标题】如何在 HTML 文本区域中找到光标位置（X/Y，而不是行/列）？ [复制]

【英文标题】：How can I find the cursor location (X/Y, not line/column) in an HTML textarea? [duplicate]

【发布时间】：2011-10-20 15:34:57

【问题描述】：

我想在<textarea> 中显示一个下拉列表，以帮助用户输入某些内容。您从当前的 IDE 中知道这一点是代码完成。当您开始输入内容时，会在当前光标/插入符号位置右侧出现一个弹出窗口，您可以使用箭头键导航它以完成文本输入。

我知道文本字符串中的how to get the cursor position（即光标位置的字符索引），但我不知道如何获取光标内部的X/Y坐标（类似于offsetWidth和offsetHeight） <textarea> 元素，以便我可以将列表元素放置在那里。这在 html/javascript 中是否可行，它是如何工作的？

【问题讨论】：

如果你知道字符的个数，以及框的宽度，你能根据平均字符宽度/行高猜出位置吗？

我已经阅读了提出的其他问题，但我不认为它的答案是解决问题的方法。此外，它已有 3 年历史，同时浏览器和标准也在进步。我不怕需要当前的浏览器才能正常工作。

@BenWilliams：你可以猜到线的高度，但不是真正的宽度。但是，您可以抓取文本，使用该文本创建一个元素，然后测量元素的宽度。只要您没有在每次触发 keypress 事件时都创建新元素，就不会太糟糕。

忘记考虑了，现在编辑为时已晚。等宽字体！是的，那会很好用。 +1。

【参考方案1】：

使用可编辑的 html 输入（在像 CKeditor 或 Rich Text Editor 甚至更好的 iframe 中：jsfiddle），您可以在插入符号位置插入一个空的 span 元素并获取该元素的位置以显示您的下拉菜单.

这可能看起来很复杂，但我想不出任何其他方法来做到这一点。

当用于代码编辑器时，它有一些额外的可能性，您可以像 jsfiddle 那样对文本和格式代码进行颜色编码，甚至可以为关键字等构建某种代码自动完成功能。

【讨论】：

额外的可能性听起来不错，您的有趣建议也是如此。但我想确保用户无法输入格式化文本（例如从 MS Word 或其他网页复制时），并且所有粘贴的文本都被重新格式化为纯文本，并且可以转换为纯文本。

有可能，jsfiddle.net 就是这样做的。他们到底是怎么做的，我不知道。试着在那个网站上编码和粘贴片刻，它可能会给你一些想法。 （在 FF 中 ctrl+v 不起作用，但“右键单击 - 粘贴”可以）

CKeditor可以下载并作为开源使用，但jsfiddle似乎只是一个Web应用程序，没有下载，没有技术见解。你知道他们是怎么做的吗？

他们似乎拦截了粘贴命令以在代码插入之前或之后格式化代码。我猜它是一个 keyup 处理程序或其他东西，也许有一个小的超时让浏览器粘贴它然后更改它。格式化代码的功能要做很多事情，首先删除所有不需要的 html（使用正则表达式），然后添加缩进（可选），然后添加颜色（添加 html 元素）。我想我可以写出类似的东西，但是要花很多时间来编写代码，而且要让它在“其他浏览器”中工作还需要更多时间。