javascript - 使 div 跟随文本区域中的插入符号位置？

Question

JSBin 在这里:http://jsbin.com/cusisidoja/1/edit?html,js,output

---

我正在尝试 POC 一个上下文菜单，如果在 textarea 元素中输入某些关键字，该菜单将弹出。这个想法是实现类似于代码完成下拉菜单在 IDE 中的工作方式的功能。

我知道这个项目的范围，所以关键字和菜单内容的细节现在并不重要。我想弄清楚的是如何在用户键入时定位插入符位置。

---

所以退后一步，将问题分解为最基本的组成部分:

如何根据对 CSS 样式有意义的 x、y 坐标获取文本区域的插入符位置？

我将一个 JSBin 与(我认为是)一个体面的外壳放在一起，用于在文本区域中的文本发生更改时监视/更新 div 的范围:http://jsbin.com/cusisidoja/1/edit?html,js,output

我知道这与我正在尝试做的事情相去甚远，但这是我目前所能理解的。我也愿意接受这样一种可能性，即实现此目的的唯一方法是通过外部库或使用 jQuery，但我什至不知道从哪里开始。

Answer 1

最简单的答案是使用 caret.js :http://ichord.github.io/Caret.js/

简单如:

$('#inputor').caret('position');

可以在 Github 上找到完整的文档:

https://github.com/ichord/Caret.js