求教：如何firefox下获取textarea或input text的内容高度和宽度

在做个web应用，希望能实现这样的功能：比如想输入一个tag，在文本框中输入#，就可以在光标处弹出一浮动窗口列表，可以从中选择输入过的tag。要设定这个浮动窗口的位置，我需要知道光标的位置。可以通过获取内容的宽度和高度来知道此时光标的位置。
找到一串代码在IE下可以获取内容的宽度和高度，在firefox下不兼容。
<SCRIPT language="javascript">
function test(obj)
{
var range = obj.createTextRange();
alert("内容区宽度: " + range.boundingWidth
+ "px\r\n内容区高度: " + range.boundingHeight + "px");

}
</SCRIPT>
<BODY>
<Textarea id="txt" height="150">sdf</textarea><INPUT type="button" value="计算内容宽度" onClick="test(txt)">
</BODY>

求一个兼容的方法来获取当前光标位置。

kayue

2010-11-17 10:51:08 +08:00

Mission impossible with textarea (let me know if you have an idea).

But if it is just a simple textbox, you should check this out: http://devthought.com/projects/mootools/textboxlist/

Basically it is tons of auto-grow width textbox. So every time a person type "#", you create a new text box, then it is possible to get the position of that new text box element.

fengluo

2010-11-17 12:04:34 +08:00

@kayue 我知道有autocomplete这个插件，我也用过的。不过却不是我想要的实现……
这个我也只在rememberthemilk这个网站中看到有这个实现的……就是我给的图中显示的样子……

我再研究研究看吧～

fengluo

2010-11-17 13:42:01 +08:00

@kayue 我想大概理解你的意思了～把输入区域的样式模拟成textbox的样式，但是里面由几个textbox组成，就可以通过textbox的大小来判断新textbox的位置～是这个意思吧～查看了这个autocomplete的源码还有facebook输入区域的源码了解这点的～

leben

2011-06-08 16:57:18 +08:00

@fengluo 请问这个问题你解决了吗？在IE下可以获得boundingTop等一列信息，但是ff怎么实现啊。

@remember2015 这个效果很好，看了一下午还是没看明白菜单弹出的位置坐标是怎么计算出来的，能指点一下吗？

fengluo

2011-06-08 17:26:56 +08:00

@leben 哈～刚上V2ex就看到这老贴⋯⋯我研究过各种类似的实现。比如facebook的status输入实际上是用把div的属性变成了editable～使之可输入，然后通过js提交。在div里比较方便获取鼠标位置。不过facebook的实现还是在整个输入框下出现提示框。

@remember2015 提供的这个实例很赞⋯⋯当时漏了，应该是v2ex那会还没提醒功能。代码暂时还没看明白，不过也应该是用div定位的

leben

2011-06-08 18:12:07 +08:00

@fengluo 关键是光标位置，在textarea里面输入的时候，光标和鼠标位置是不一样的。keypress产生的event本身没有pagex。在ie下可以用boundingtop等属性获得，但是w3c dom里面没有对应的属性。facebook那几个例子autocomplete还是以input为基准位置的。离remember2015的这个样子还是差太大了，看了一下午content-assist，还是没看明白是怎么实现的。。。汗。

Hyperion

2011-06-08 18:30:20 +08:00

厉害...好像...好像坐标是一行行算出来的...

本地调试中...

(https://github.com/sergeche/tx-content-assist/blob/master/src/TextViewer.js)

fengluo

2011-06-08 23:21:04 +08:00

@Hyperion 嗯～以前我自己试着架设这个镜像代理的时候，创建的第一个application，访问不了。我创建第二个application，取了一个跟镜像代理无关的名字才OK。觉得可能是关键字过滤之类⋯⋯纯属臆测了～

reducm

2011-11-23 02:14:41 +08:00

以前写过一个类似就新浪微博输入@符号时光标下方能有框提示，实际是写一个与当前textarea相同大小的div而每当textarea有键盘事件或输入或点击时，同步内容到div，并在光标相对div的位置插一个空span，那span到div的距离就是光标与textarea的相对距离了

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/4613

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.