技术分享 Javascript如何获取textarea中光标位置

开发 前端
你对使用Javascript获取textarea中的光标位置是否了解,这里和大家分享一下,Javascript一向以他的灵活随意而著称,这也使得它的功能可以非常的强大。

这里和大家分享一下如何用Javascript获取textarea中的光标位置,相信本文介绍一定会让你有所收获的。

用Javascript获取textarea中的光标位置

Javascript一向以他的灵活随意而著称,这也使得它的功能可以非常的强大,而由于没有比较好的调试工具,又使得它使用起来困难重重,尤其使对于一些初学者,更是感觉到无从下手。今天探讨的问题是用javascript获取textarea中光标的位置。对于写javascript写网页编辑器的人来说,获取textarea中的光标位置是一个非常重要的问题,而往往很多人在这个地方不知所措,找不到好的办法。昨天我在网上找到了一段javascript代码,本来不想把原版放在这里的,就是因为太精彩了,怕我给改坏了,所以还是原版放在这里吧。

  1. varstart=0;  
  2. varend=0;  
  3. functionadd(){  
  4. vartextBox=document.getElementById("ta");  
  5. varpre=textBox.value.substr(0,start);  
  6. varpost=textBox.value.substr(end);  
  7. textBox.value=pre+document.
  8. getElementById("inputtext").value+post;  
  9. }  
  10. functionsavePos(textBox){  
  11. //如果是Firefox(1.5)的话,方法很简单  
  12. if(typeof(textBox.selectionStart)=="number"){  
  13. start=textBox.selectionStart;  
  14. end=textBox.selectionEnd;  
  15. }  
  16. //下面是IE(6.0)的方法,麻烦得很,还要计算上'\n'  
  17. elseif(document.selection){  
  18. varrange=document.selection.createRange();  
  19. if(range.parentElement().id==textBox.id){  
  20. //createaselectionofthewholetextarea  
  21. varrange_all=document.body.createTextRange();  
  22. range_all.moveToElementText(textBox);  
  23. //两个range,一个是已经选择的text(range),  
  24. 一个是整个textarea(range_all)  
  25. //range_all.compareEndPoints()比较两个端点,  
  26. 如果range_all比range更往左(furthertotheleft),  
  27. 则//返回小于0的值,则range_all往右移一点,直到两个range的start相同。  
  28. //calculateselectionstartpointbymoving
  29. beginningofrange_alltobeginningofrange  
  30. for(start=0;range_all.compareEndPoints
  31. ("StartToStart",range)<0;start++)range_all.moveStart('character',1);  
  32. //getnumberoflinebreaksfromtextareastarttose
  33. lectionstartandaddthemtostart  
  34. //计算一下\n  
  35. for(vari=0;i<=start;i++){  
  36. if(textBox.value.charAt(i)=='\n')  
  37. start++;  
  38. }  
  39. //createaselectionofthewholetextarea  
  40. varrange_all=document.body.createTextRange();  
  41. range_all.moveToElementText(textBox);  
  42. //calculateselectionendpointbymovingbeginningofrange_alltoendofrange  
  43. for(end=0;range_all.compareEndPoints('StartToEnd',range)<0;end++)  
  44. range_all.moveStart('character',1);  
  45. //getnumberoflinebreaksfromtextareastarttoselectionendandaddthemtoend  
  46. for(vari=0;i<=end;i++){  
  47. if(textBox.value.charAt(i)=='\n')  
  48. end++;  
  49. }  
  50. }  
  51. }  
  52. document.getElementById("start").value=start;  
  53. document.getElementById("end").value=end;  
  54. }  
  55.  

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

  1. <formactionformaction="a.cgi"> 
  2. <tablebordertableborder="1"
  3. cellspacing="0"cellpadding="0"> 
  4. <tr> 
  5. <td>start:<inputtypeinputtype="text"
  6. id="start"size="3"/></td> 
  7. <td>end:<inputtypeinputtype="text"
  8. id="end"size="3"/></td> 
  9. </tr> 
  10. <tr> 
  11. <tdcolspantdcolspan="2"> 
  12. <textareaidtextareaid="ta"onKeydown="savePos(this)"  
  13. onKeyup="savePos(this)" 
  14. onmousedown="savePos(this)" 
  15. onmouseup="savePos(this)" 
  16. onfocus="savePos(this)" 
  17. rows="14"cols="50"></textarea> 
  18. </td> 
  19. </tr> 
  20. <tr> 
  21. <td><inputtypeinputtype="text"
  22. id="inputtext"/></td> 
  23. <td><inputtypeinputtype="button"
  24. onClick="add()"value="AddText"/></td> 
  25. </tr> 
  26. </table> 
  27. </form> 

【编辑推荐】

  1. Javascript解决浏览器兼容问题12个技巧
  2. JS中Array数组的三大属性用法揭秘
  3. 解析Javascript对select下拉列表操作
  4. 技术分享 如何识别控制DHTML和JS中的页面元素
  5. 深入学习JavaScript中Function对象语法 

 

责任编辑:佚名 来源: jb51.net
相关推荐

2011-05-25 14:34:26

javascript

2010-09-28 13:50:20

2011-07-08 09:07:11

JavaScript

2010-09-30 15:24:31

滚动条Javascript

2023-01-18 10:41:43

JavaScrip获取网络数据

2022-11-29 08:07:23

CSSJavaScript自定义

2010-07-30 10:37:23

Flex数据绑定

2023-04-26 15:19:36

JavaScripMap数组

2010-07-28 12:41:18

Flex组件

2010-07-15 15:21:07

Perl线程

2010-06-02 16:09:05

SVN协议

2010-08-02 15:26:27

FlexBuilder

2020-06-17 08:48:22

JavaScript开发技术

2010-09-09 11:03:32

CSS样式

2010-05-31 20:07:31

SVN版本控制插件

2013-08-06 15:16:27

技术人创业开发者创业移动互联网创业

2018-08-08 14:55:32

KVM虚拟化取证

2011-06-10 15:39:47

外链

2010-10-09 10:56:50

DHTMLJS

2010-06-01 18:49:19

删除SVN备份
点赞
收藏

51CTO技术栈公众号