推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
› Closure: The Definitive Guide
求教：如何firefox下获取textarea或input text的内容高度和宽度
fengluo · 2010-11-17 00:45:39 +08:00 · 8903 次点击这是一个创建于 5153 天前的主题，其中的信息可能已经有所发展或是发生改变。
在做个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>
求一个兼容的方法来获取当前光标位置。
找到一串代码在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>
求一个兼容的方法来获取当前光标位置。
 |
1
fengluo OP 补图 http://d.pr/Ipgj
类似于这样的实现 |
 |
2
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. |
|
3
fengluo OP @kayue 我知道有autocomplete这个插件，我也用过的。不过却不是我想要的实现……
这个我也只在rememberthemilk这个网站中看到有这个实现的……就是我给的图中显示的样子…… 我再研究研究看吧～ |
|
4
fengluo OP @kayue 我想大概理解你的意思了～把输入区域的样式模拟成textbox的样式，但是里面由几个textbox组成，就可以通过textbox的大小来判断新textbox的位置～是这个意思吧～查看了这个autocomplete的源码还有facebook输入区域的源码了解这点的～
|
 |
5
remember2015 2010-11-18 10:46:44 +08:00
http://media.chikuyonok.ru/content-assist/
这个很不错，应该适合你，PS：Safari下效果最佳 |
 |
6
leben 2011-06-08 16:57:18 +08:00
@fengluo 请问这个问题你解决了吗？在IE下可以获得boundingTop等一列信息，但是ff怎么实现啊。
@remember2015 这个效果很好，看了一下午还是没看明白菜单弹出的位置坐标是怎么计算出来的，能指点一下吗？ |
|
7
fengluo OP @leben 哈～刚上V2ex就看到这老贴⋯⋯我研究过各种类似的实现。比如facebook的status输入实际上是用把div的属性变成了editable～使之可输入，然后通过js提交。在div里比较方便获取鼠标位置。不过facebook的实现还是在整个输入框下出现提示框。
@remember2015 提供的这个实例很赞⋯⋯当时漏了，应该是v2ex那会还没提醒功能。代码暂时还没看明白，不过也应该是用div定位的 |
|
8
leben 2011-06-08 18:12:07 +08:00
@fengluo 关键是光标位置，在textarea里面输入的时候，光标和鼠标位置是不一样的。keypress产生的event本身没有pagex。在ie下可以用boundingtop等属性获得，但是w3c dom里面没有对应的属性。facebook那几个例子autocomplete还是以input为基准位置的。离remember2015的这个样子还是差太大了，看了一下午content-assist，还是没看明白是怎么实现的。。。汗。
|
 |
9
Hyperion 2011-06-08 18:30:20 +08:00
厉害...好像...好像坐标是一行行算出来的...
本地调试中... (https://github.com/sergeche/tx-content-assist/blob/master/src/TextViewer.js) |
|
10
Hyperion 2011-06-08 21:14:39 +08:00
|
|
12
fengluo OP @Hyperion v2ex给img.ly的图加了基于gae的镜像代理，如果没被墙应该能看到。不过我一直挂vpn的⋯⋯
|
|
14
fengluo OP @Hyperion 嗯～以前我自己试着架设这个镜像代理的时候，创建的第一个application，访问不了。我创建第二个application，取了一个跟镜像代理无关的名字才OK。觉得可能是关键字过滤之类⋯⋯纯属臆测了～
|
 |
15
reducm 2011-11-23 02:14:41 +08:00 via Android
以前写过一个类似就新浪微博输入@符号时光标下方能有框提示，实际是写一个与当前textarea相同大小的div而每当textarea有键盘事件或输入或点击时，同步内容到div，并在光标相对div的位置插一个空span，那span到div的距离就是光标与textarea的相对距离了
|
Select Language