这里和大家分享一下如何用Javascript获取textarea中的光标位置,相信本文介绍一定会让你有所收获的。
用Javascript获取textarea中的光标位置
Javascript一向以他的灵活随意而著称,这也使得它的功能可以非常的强大,而由于没有比较好的调试工具,又使得它使用起来困难重重,尤其使对于一些初学者,更是感觉到无从下手。今天探讨的问题是用javascript获取textarea中光标的位置。对于写javascript写网页编辑器的人来说,获取textarea中的光标位置是一个非常重要的问题,而往往很多人在这个地方不知所措,找不到好的办法。昨天我在网上找到了一段javascript代码,本来不想把原版放在这里的,就是因为太精彩了,怕我给改坏了,所以还是原版放在这里吧。
- 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>
【编辑推荐】
- Javascript解决浏览器兼容问题12个技巧
- JS中Array数组的三大属性用法揭秘
- 解析Javascript对select下拉列表操作
- 技术分享 如何识别控制DHTML和JS中的页面元素
- 深入学习JavaScript中Function对象语法