推荐关注 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 9366 次点击这是一个创建于 5442 天前的主题，其中的信息可能已经有所发展或是发生改变。
在做个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 |
| 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