在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功能.

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

所以我要问的是双重的:(1)有没有更好的方法来获得按键的x坐标？(2)如果没有,我可以在谷歌Chrome加载项的上下文中做些什么来获取相同的数据？

Answer 1

检查DOJO 工具包中事件对象的实现可能会很有趣。

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

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