V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
fengluo
V2EX  ›  JavaScript

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

  •  
  •   fengluo · 2010-11-17 00:45:39 +08:00 · 8834 次点击
    这是一个创建于 5105 天前的主题,其中的信息可能已经有所发展或是发生改变。
    在做个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>

    求一个兼容的方法来获取当前光标位置。
    15 条回复    1970-01-01 08:00:00 +08:00
    fengluo
        1
    fengluo  
    OP
       2010-11-17 00:52:08 +08:00
    补图 http://d.pr/Ipgj
    类似于这样的实现
    kayue
        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.
    fengluo
        3
    fengluo  
    OP
       2010-11-17 12:04:34 +08:00
    @kayue 我知道有autocomplete这个插件,我也用过的。不过却不是我想要的实现……
    这个我也只在rememberthemilk这个网站中看到有这个实现的……就是我给的图中显示的样子……

    我再研究研究看吧~
    fengluo
        4
    fengluo  
    OP
       2010-11-17 13:42:01 +08:00
    @kayue 我想大概理解你的意思了~把输入区域的样式模拟成textbox的样式,但是里面由几个textbox组成,就可以通过textbox的大小来判断新textbox的位置~是这个意思吧~查看了这个autocomplete的源码还有facebook输入区域的源码了解这点的~
    remember2015
        5
    remember2015  
       2010-11-18 10:46:44 +08:00
    http://media.chikuyonok.ru/content-assist/
    这个很不错,应该适合你,PS:Safari下效果最佳
    leben
        6
    leben  
       2011-06-08 16:57:18 +08:00
    @fengluo 请问这个问题你解决了吗?在IE下可以获得boundingTop等一列信息,但是ff怎么实现啊。

    @remember2015 这个效果很好,看了一下午还是没看明白菜单弹出的位置坐标是怎么计算出来的,能指点一下吗?
    fengluo
        7
    fengluo  
    OP
       2011-06-08 17:26:56 +08:00
    @leben 哈~刚上V2ex就看到这老贴⋯⋯我研究过各种类似的实现。比如facebook的status输入实际上是用把div的属性变成了editable~使之可输入,然后通过js提交。在div里比较方便获取鼠标位置。不过facebook的实现还是在整个输入框下出现提示框。

    @remember2015 提供的这个实例很赞⋯⋯当时漏了,应该是v2ex那会还没提醒功能。代码暂时还没看明白,不过也应该是用div定位的
    leben
        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,还是没看明白是怎么实现的。。。汗。
    Hyperion
        9
    Hyperion  
       2011-06-08 18:30:20 +08:00
    厉害...好像...好像坐标是一行行算出来的...

    本地调试中...

    (https://github.com/sergeche/tx-content-assist/blob/master/src/TextViewer.js)
    Hyperion
        10
    Hyperion  
       2011-06-08 21:14:39 +08:00
    好吧, 可能是真相的原理图... 试试看能不能发图...
    http://img.ly/4Q3K
    (img.ly 看不到你懂的...)
    fengluo
        11
    fengluo  
    OP
       2011-06-08 22:45:11 +08:00
    @Hyperion 嗯~你应该是发现了真相!
    fengluo
        12
    fengluo  
    OP
       2011-06-08 22:46:55 +08:00
    @Hyperion v2ex给img.ly的图加了基于gae的镜像代理,如果没被墙应该能看到。不过我一直挂vpn的⋯⋯
    Hyperion
        13
    Hyperion  
       2011-06-08 23:03:45 +08:00
    @fengluo appspot.com不是也被墙奸了么...难道一部分没有?... 汗
    fengluo
        14
    fengluo  
    OP
       2011-06-08 23:21:04 +08:00
    @Hyperion 嗯~以前我自己试着架设这个镜像代理的时候,创建的第一个application,访问不了。我创建第二个application,取了一个跟镜像代理无关的名字才OK。觉得可能是关键字过滤之类⋯⋯纯属臆测了~
    reducm
        15
    reducm  
       2011-11-23 02:14:41 +08:00 via Android
    以前写过一个类似就新浪微博输入@符号时光标下方能有框提示,实际是写一个与当前textarea相同大小的div而每当textarea有键盘事件或输入或点击时,同步内容到div,并在光标相对div的位置插一个空span,那span到div的距离就是光标与textarea的相对距离了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2765 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 11:41 · PVG 19:41 · LAX 03:41 · JFK 06:41
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.