jQuery获取textarea光标/插入符号X，Y位置并在下面显示一个DIV

Posted 2023-05-08

【中文标题】jQuery获取textarea光标/插入符号X，Y位置并在下面显示一个DIV

【英文标题】：jQuery get textarea cursor/caret X,Y position and show a DIV underneath

【发布时间】：2011-08-10 18:19:18

【问题描述】：

我正在尝试在 Gmail/Google Docs 富文本所见即所得编辑器中实现类似“更改/删除链接”的功能，当您键入 URL 时，会在其下方显示一个 div，显示“转到链接、更改、远程”

如何使用 jQuery 编写类似的东西？

如何获取光标所在行列？ 如何计算字体宽度和高度（尤其是一些粗体/斜体样式的非固定宽度字体） 如何确保 DIV 出现在单词的开头？

提前谢谢你！

【问题讨论】：

查看谷歌搜索结果，大部分都没有太大帮助。

您建议您正在构建一个所见即所得的编辑器。您确定要使用textarea 吗？文本区域不支持 html。

How do I get the (x, y) pixel coordinates of the caret in text boxes? 的可能重复项

【参考方案1】：

回答：http://jsfiddle.net/morrison/57BR3/

它的作用：

创建位于超链接附近的 div。 看起来像 Google 文档框。 能够更改文本和网址。 已实施移除。

它没有做什么：

在 textarea 上工作。 Textareas 不支持 html，因为它们是纯文本。这是一个需要解决的复杂过程。找到一个图书馆，然后实施我的答案。 当您的光标被箭头键移动到它上面时打开。由于上述项目，无法正常工作。

【讨论】：

@Levi 效果很好，但是使用 $body.delegate('#main a', 'click', function(e) ......而不是使用简单的$('#main a').click()?

是的，实际上。您的方式创建多个事件处理程序。我的方式有一个。此外，当您单击元素时，您希望它消失。我不小心从小提琴中删除了那段代码，但它现在又回来了。如果您在#main 上绑定，则单击无法正常工作。尝试将 $body.delegate 更改为 $('#main') 会失败。从来没有弄清楚为什么。如果你能解决这个问题，请告诉我解决方案。

@Levi Morrison 非常感谢，我可以从您的代码中学到很多东西。但是您知道计算光标位置的任何方法吗？我的问题是打算在 VisualStudio/Eclipse 中制作类似自动完成/自动建议下拉菜单的东西，因此我必须在 IE 和其他浏览器中获取光标前的整个“单词”。例如，我在文本区域中输入window.，光标停留在. 之后，但我需要在光标之前抓取最近的文本：window，通过一些 AJAX 调用，我可以在单词 @ 下方显示一个 div 987654325@，用户可以从项目列表中选择一些东西。

@est 我不确定我完全理解你在说什么，但要获得事件的位置，你可以使用 e.pageX 和 e.pageY

@est 这会创建很多 DOM 元素，但是如果每个单词都包含在 span 标签中，您可以在其父级上使用委托并执行 $parent.delegate('span', '点击'，功能（e））；这是我目前能想到的最佳答案。

【参考方案2】：

您建议您正在构建一个所见即所得的编辑器。您确定要使用 textarea 吗？文本区域不支持 HTML。要回答您的later comment，在文本区域中获取插入符号的 (x, y) 位置的最佳方法是使用textarea-caret-position plugin。