js TextArea获取光标详解说明与实例

可能许多朋友会对新浪微博和沪江碎碎里,敲入@时弹出用户列表的功能是如何实现的比较困惑。

 

其中,最难解决的问题应该就是获取当前光标据文本框的相对位置了。因为一个普通的<textarea></textarea>通过正常的途径是无法获取到的。

那怎么办呢~

第一步:创建一个普通的TextArea框,然后在TextArea外层套一个DIV(DIV的Position设为relative,到时候会根据这个div来定位弹出框的位置)

 

第二步:创建一个与TextArea 同样尺寸的DIV(这个DIV在什么位置无所谓)在此我先称其为div_textarea

注意:该DIV的所使用的字体,文字的大小,行间距等都要与文本框里所使用的一致。然后将 div_textarea 的Position也设为relative,visibility设为hidden(这个是背后操作的,当然不能让人看到啦)

说明:该DIV的作用就是用来获取输入@时光标的相对位置的。 

结构如下:

 

第三步:脚本获取相对位置

操作: 当用户输入@了,通过脚本自动将文本框里的这些字符复制到 div_textarea 里,然后获取当前文本框光标在第几个字的后面,获得后在@相当于文本框的同样位置,插入<span class="nowpos"></span>(该span和@的相对位置应该是一样的)。 

插入完后,那只要获得这个span离 div_textarea 的相对位置,就知道@离文本框的位置了。

 

获得相对位置了

看个js实现代码

所以还是原版放在这里吧。


    varstart=0;  

    varend=0;  

    functionadd(){  

    vartextBox=document.getElementById("ta");  

    varpre=textBox.value.substr(0,start);  

    varpost=textBox.value.substr(end);  

    textBox.value=pre+document.

    getElementById("inputtext").value+post;  

    }  

    functionsavePos(textBox){  

    //如果是Firefox(1.5)的话,方法很简单  

    if(typeof(textBox.selectionStart)=="number"){  

    start=textBox.selectionStart;  

    end=textBox.selectionEnd;  

    }  

    //下面是IE(6.0)的方法,麻烦得很,还要计算上'n'  

    elseif(document.selection){  

    varrange=document.selection.createRange();  

    if(range.parentElement().id==textBox.id){  

    //createaselectionofthewholetextarea  

    varrange_all=document.body.createTextRange();  

    range_all.moveToElementText(textBox);  

    //两个range,一个是已经选择的text(range),  

    一个是整个textarea(range_all)  

    //range_all.compareEndPoints()比较两个端点,  

    如果range_all比range更往左(furthertotheleft),  

    则//返回小于0的值,则range_all往右移一点,直到两个range的start相同。  

    //calculateselectionstartpointbymoving

    beginningofrange_alltobeginningofrange  

    for(start=0;range_all.compareEndPoints

    ("StartToStart",range)<0;start++)range_all.moveStart('character',1);  

    //getnumberoflinebreaksfromtextareastarttose

    lectionstartandaddthemtostart  

    //计算一下n  

    for(vari=0;i<=start;i++){  

    if(textBox.value.charAt(i)=='n')  

    start++;  

    }  

    //createaselectionofthewholetextarea  

    varrange_all=document.body.createTextRange();  

    range_all.moveToElementText(textBox);  

    //calculateselectionendpointbymovingbeginningofrange_alltoendofrange  

    for(end=0;range_all.compareEndPoints('StartToEnd',range)<0;end++)  

    range_all.moveStart('character',1);  

    //getnumberoflinebreaksfromtextareastarttoselectionendandaddthemtoend  

    for(vari=0;i<=end;i++){  

    if(textBox.value.charAt(i)=='n')  

    end++;  

    }  

    }  

    }  

    document.getElementById("start").value=start;  

    document.getElementById("end").value=end;  

    }  

     

     

     


    下面是在页面中调用js代码的方法:

    <formactionformaction="a.cgi"> 

    <tablebordertableborder="1"

    cellspacing="0"cellpadding="0"> 

    <tr> 

    <td>start:<inputtypeinputtype="text"

    id="start"size="3"/></td> 

    <td>end:<inputtypeinputtype="text"

    id="end"size="3"/></td> 

    </tr> 

    <tr> 

    <tdcolspantdcolspan="2"> 

    <textareaidtextareaid="ta"onKeydown="savePos(this)"  

    onKeyup="savePos(this)" 

    onmousedown="savePos(this)" 

    onmouseup="savePos(this)" 

    onfocus="savePos(this)" 

    rows="14"cols="50"></textarea> 

    </td> 

    </tr> 

    <tr> 

    <td><inputtypeinputtype="text"

    id="inputtext"/></td> 

    <td><inputtypeinputtype="button"

    onClick="add()"value="AddText"/></td> 

    </tr> 

    </table> 

    </form> 

 


转自:http://www.111cn.net/wy/js-ajax/38581.htm
 

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值