Javascript jQuery获取文本区域光标/插入符号X，Y位置，并在下方显示一个DIV

我试图在Gmail/Google文档richtext WYSIWYG edtior中实现类似“更改/删除链接”的功能，当您键入URL时，它下面会显示一个div，上面写着“转到链接，更改，远程”

我如何使用jQuery编写这样的东西

如何获取光标的行和列

如何计算字体宽度和高度（尤其是粗体/斜体的非定宽字体）

如何确保DIV出现在单词的开头

提前谢谢你

回答：

它的作用：

• 创建位于超链接附近的div
• 看起来像谷歌文档盒
• 能够更改文本和url
• 删除已实现

它没有做什么：

• 在文本区工作。文本区域不支持html，因为它们是纯文本。这是一个复杂的工作过程。找到一个库，然后实现我的答案
• 当光标通过箭头键移动到其上时打开。由于上述项目，无法正常工作

回答：

它的作用：

• 创建位于超链接附近的div
• 看起来像谷歌文档盒
• 能够更改文本和url
• 删除已实现

它没有做什么：

• 在文本区工作。文本区域不支持html，因为它们是纯文本。这是一个复杂的工作过程。找到一个库，然后实现我的答案
• 当光标通过箭头键移动到其上时打开。由于上述项目，无法正常工作

---

您建议您正在构建所见即所得编辑器。您确定要使用文本区域吗？文本区域不支持HTML。要回答您的问题，获取插入符号在文本区域中的（x，y）位置的最佳方法是使用。
您建议您正在构建所见即所得编辑器。您确定要使用文本区域吗？文本区域不支持HTML。要回答您的问题，获取插入符号在文本区域中的（x，y）位置的最佳方法是使用。
查看谷歌搜索结果，其中大多数结果都没有太大帮助。您建议您正在构建所见即所得编辑器。是否确实要使用

文本区域

？Textareas不支持HTML。可能会重复查看谷歌结果，其中大部分没有多大帮助。你是说你正在构建所见即所得编辑器。是否确实要使用

文本区域

？Textareas不支持HTML。@Levi的可能副本工作得很好，但是否有任何特殊原因使用$body.delegate（'main a'，'click'，function（e）{……。而不是使用简单的$（'main a'）。click（）？是的，事实上。您的方式创建了多个事件处理程序。我的方式有一个。此外，当您单击该元素时，您希望它消失。我不小心从小提琴上删除了那段代码，但它现在又回来了。如果绑定到#main，则单击无法正常工作。请尝试将$body.delegate更改为$（“#main”）它会失败。我从来都不知道为什么。如果你能解决这个问题，请告诉我解决方案。@Levi Morrison非常感谢，我可以从你的代码中学到很多东西。但是你知道计算光标位置的方法吗？我的问题是想在VisualStudio/Eclipse中创建类似自动完成/自动建议的下拉菜单，因此我没有o了解整个“单词”在IE和其他浏览器中，在光标之前。例如，我键入

窗口。

在文本区域中，光标停留在
之后，但我需要抓取光标之前最近的文本：

窗口

，通过一些AJAX调用，我可以在单词

窗口

下方显示一个div，用户可以从列表中选择一些内容items.@est我不确定我是否完全理解您的意思，但要了解事件的位置，可以使用e.pageX和e。pageY@est这将创建许多DOM元素，但如果每个单词都包装在一个span标记中，则可以在其父级上使用委托并执行$parent.delegate（'span'，'click'，function（e）{}）；这是我目前能想到的最好的答案。@Levi工作得很好，但是使用$body.delegate（“#main a”，“click”，“function（e）”{……，而不是使用简单的$（“#main a”）。click（）？是的，事实上。您的方式创建了多个事件处理程序。我的方式有一个。此外，当您单击该元素时，您希望它消失。我不小心从小提琴上删除了那段代码，但它现在又回来了。如果绑定到#main，则单击无法正常工作。请尝试将$body.delegate更改为$（“#main”）它会失败。我从来都不知道为什么。如果你能解决这个问题，请告诉我解决方案。@Levi Morrison非常感谢，我可以从你的代码中学到很多东西。但是你知道计算光标位置的方法吗？我的问题是想在VisualStudio/Eclipse中创建类似自动完成/自动建议的下拉菜单，因此我没有o了解整个“单词”在IE和其他浏览器中，在光标之前。例如，我键入

窗口。

在文本区域中，光标停留在
之后，但我需要抓取光标之前最近的文本：

窗口

，通过一些AJAX调用，我可以在单词

窗口

下方显示一个div，用户可以从列表中选择一些内容items.@est我不确定我是否完全理解您的意思，但要了解事件的位置，可以使用e.pageX和e。pageY@est这将创建许多DOM元素，但如果每个单词都包装在一个span标记中，则可以在其父级上使用委托并执行$parent.delegate（'span'，'click'，function（e）{}）这是我目前能想到的最好的答案。