js获取光标位置几种方法

1、js获取光标位置几种方法js文章 2009-04-01 15:41:56 阅读303 评论0 字号：大中小订阅 1。= 使用TextRange获取输入框中光标的位置 =TextRange是用来表现HTML元素中文字的对象，虽然我们平时不太常用这个对象，可是它却在IE4.0中就已提供了。不过TextRange提供的调用方法却都比较晦涩，那么我们能拿它做些什么呢？ TextRange的传统用途是对用户在Web页上用鼠标圈选的文字内容的操作，比如变化、删除、新增等。但其经典的用途却是，在Web页面中查找文字(这个比较简单)和获取输入框光标的位置。其中后者又有可以衍生出很多更有用的用途，比如：限制输入

2、的MaskTextBox，其核心技术点就是获取输入框的光标位置，然后使用正则表达式判断输入内容。还有我后面会介绍的使用方向键在输入框矩阵中自然的导航，核心技术点也是获取输入框中的光标位置。 获取输入框中的光标位置的整个代码其实很短，只是这些对象和方法不太常用而已。 functionGetCursorPsn(txb) varslct=document.selection; varrng=slct.createRange(); txb.select(); rng.setEndPoint(StartToStart,slct.createRange(); varpsn=rng.text.length;

3、 rng.collapse(false); rng.select(); returnpsn; 要彻底的弄清楚TextRange的具体用法，需要了解与其相关的一些内容，请参考MSDN。 这里说一下使用这个GetCursorPsn()方法后，会给输入框操作带来的副作用。对于输入框，它将不能再使用Shift+左右这两个方向键来选择文本；对于，将不能再使用Shift+上下左右四个方向键来选择文本。因为代码在获取了当前光标到文本的startPoint后，调用rng.collapse(false);会改变文本筐内文本的EditPoint。不过这个副作用基本不会给我们使用文本框带来什么大的问题，所以基本不用

4、太在意。2。=javascript获取textarea光标位置，内容方法(IE, Firefox)=1. html 2. 3. TEST4. 5. body,td 6. font-family:verdana,arial,helvetica,sans-serif; 7. font-size:12px; 8. 9. 10. 11. varstart=0; 12. varend=0; 13. functionadd() 14. vartextBox=document.getElementById(ta); 15. varpre=textBox.value.substr(0,start); 16.

5、varpost=textBox.value.substr(end); 17. textBox.value=pre+document.getElementById(inputtext).value+post; 18. 19. functionsavePos(textBox) 20. /如果是Firefox(1.5)的话，方法很简单 21. if(typeof(textBox.selectionStart)=number) 22. start=textBox.selectionStart; 23. end=textBox.selectionEnd; 24. 25. /下面是IE(6.0)的方法，麻

6、烦得很，还要计算上n 26. elseif(document.selection) 27. varrange=document.selection.createRange(); 28. if(range.parentElement().id=textBox.id) 29. /createaselectionofthewholetextarea 30. varrange_all=document.body.createTextRange(); 31. range_all.moveToElementText(textBox); 32. /两个range，一个是已经选择的text(range)，一个

7、是整个textarea(range_all) 33. /range_pareEndPoints()比较两个端点，如果range_all比range更往左(furthertotheleft)，则/返回小于0的值，则range_all往右移一点，直到两个range的start相同。 34. /calculateselectionstartpointbymovingbeginningofrange_alltobeginningofrange 35. for(start=0;range_pareEndPoints(StartToStart,range)0;start+) 36. range_all.m

8、oveStart(character,1); 37. /getnumberoflinebreaksfromtextareastarttoselectionstartandaddthemtostart 38. /计算一下n 39. for(vari=0;i=start;i+) 40. if(textBox.value.charAt(i)=n) 41. start+; 42. 43. /createaselectionofthewholetextarea 44. varrange_all=document.body.createTextRange(); 45. range_all.moveToEl

9、ementText(textBox); 46. /calculateselectionendpointbymovingbeginningofrange_alltoendofrange 47. for(end=0;range_pareEndPoints(StartToEnd,range)0;end+) 48. range_all.moveStart(character,1); 49. /getnumberoflinebreaksfromtextareastarttoselectionendandaddthemtoend 50. for(vari=0;i=end;i+) 51. if(textBo

10、x.value.charAt(i)=n) 52. end+; 53. 54. 55. 56. document.getElementById(start).value=start; 57. document.getElementById(end).value=end; 58. 59. 60. 61. 62. 63. 64. 65. start: 66. end: 67. 68. 69. 70. 76. 77. 78. 79. 80. 81. 82. 83. 84. 85. 86. = 3。=提供两个函数，可以很方便的使用 function moveCursor(obj) if(

11、=txt1&event.keyCode=39&getCursorPos(obj)=obj.value.length)event.returnValue=false;setCursorPos(txt2,0); if(=txt2&event.keyCode=37&getCursorPos(obj)=0)event.returnValue=false;setCursorPos(txt1,txt1.value.length); function getCursorPos(obj) obj.focus(); var currentRange=document.selection.crea

12、teRange(); var workRange=currentRange.duplicate(); obj.select(); var allRange=document.selection.createRange(); var pos=0; while(workRpareEndPoints(StartToStart,allRange)0) workRange.moveStart(character,-1); pos+; currentRange.select(); return pos; function setCursorPos(obj,pos) var rng =obj.createT

13、extRange(); rng.moveStart(character,pos); rng.collapse(true); rng.select(); =控制上下箭头使光标移动(收藏品): Untitled Document var cols=3; var obj; var CanMove=false; var key; function setobj(input) obj=input; function init() document.onkeydown=keyDown; document.onkeyup=keyUp; function keyDown(DnEvents) var key=w

14、indow.event.keyCode; if(key=116) window.event.keyCode=0; return false; if(key=8) if(event.srcElement.tagName!=INPUT) event.cancelBubble = true; event.returnValue = false; return false; var IsCtrl=window.event.ctrlKey; if(!IsCtrl) return; for(var i=0;i0) document.forms0.elementsi-1.focus(); if (key = 38)/ if(icols-1) document.forms0.elementsi-cols.focus(); if (key = 39)/ if(idocument.forms0.elem