在JavaScript中构建IntelliSense / AutoComplete

Question

我目前维护一个Firefox附加组件，它为实现自己的标记语言的论坛网站添加了许多功能，类似于stackoverflow提供的“Markdown”。

我已为此附加组件构建了一个IntelliSense功能，与Visual Studio类似，在textarea中键入此标记时会弹出自动建议。例如：

http://members.lycos.co.uk/suffusion/namfox/faq-1.5/autocomplete-example-2-1.jpg

实现最困难的事情是在textarea中找到按键的（x，y）坐标，这样我就可以弹出非常接近它的IntelliSense窗口。 JavaScript中的按键事件不会暴露这些坐标，所以我不得不解决这个问题。不幸的是，我只能找到一种跨浏览器兼容的获取y坐标的方法，而不是x坐标。其代码位于_getPopupPoint函数中的here。

这适用于Firefox，因为我使用了一些Mozilla的XPCOM接口来获取坐标。因此，虽然这适用于Firefox，但现在我想将我的插件移植到Google Chrome，我找不到获取坐标的方法。

所以我要问的是双重的： （1）有没有更好的方法来获得按键的x坐标？ （2）如果没有，我可以在Google Chrome加载项的上下文中做些什么来获取相同的数据吗？

Answer 1

window.getSelection和相关方法可能正是您所寻找的。您可以使用偏移等函数计算插入符的屏幕位置。

Answer 2

检查event object in DOJO toolkit的实施情况会很有趣。

Dojo使用事件对象提供以下属性：

• event.target - 生成事件的元素
• event.currentTarget - 当前目标
• event.layerX - 相对于event.currentTarget
的x坐标
• event.layerY - 相对于event.currentTarget
的y坐标
• event.pageX - 相对于视口的x坐标
• event.pageY - 相对于视口的y坐标
• event.relatedTarget - 对于onmouseover和onmouseout，鼠标指针移入或移出的对象
• event.charCode - 对于按键事件，按下的键的字符代码
• event.keyCode - 对于按键事件，处理特殊键，如ENTER和空格键。
• event.charOrCode - charCode和keyCode的标准化版本，可用于直接比较alpha键和特殊键。 （在1.1中添加）