js获取光标位置几种方法.docxVIP

js获取光标位置几种方法 js文章 2009-04-01 15:41:56 阅读303 评论0 字号：大中小 订阅 1。================== 使用TextRange获取输入框中光标的位置 TextRange是用来表现HTML元素中文字的对象，虽然我们平时不太常用这个对象，可是它却在 IE4.0中就已提供了。不过 TextRange提供的调用方法却都比较晦涩，那么我们能拿它做些什么呢？ TextRange的传统用途是对用户在 Web页上用鼠标圈选的文字内容的操作，比如变化、删除、新增等。但其经典的用途却 是，在Web页面中查找文字(这个比较简单)和获取输入框光标的位置。其中后者又有可以衍生岀很多更有用的用途，比如：限 制输入的MaskTextBox，其核心技术点就是获取输入框的光标位置，然后使用 正则表达式判断输入内容。还有我后面会介绍的 使用方向键在输入框矩阵中自然的导航 ，核心技术点也是获取输入框中的光标位置。 获取输入框中的光标位置的整个代码其实很短，只是这些对象和方法不太常用而已。 vscript language =javascript function GetCursorPsn(txb) { var slct = document.selection; var rng = slct.createRange(); txb.select(); rng.setEndPoint(StartToStart, slct.createRange()); var psn = rng.text」ength; rng.collapse( false); rng.select(); return psn; } /script 要彻底的弄清楚TextRange的具体用法，需要了解与其相关的一些内容，请参考 MSDN。 这里说一下使用这 个 GetCursorPsn()方法后，会给输入框操作带来的副作用。对于输入框input type=text on keydow n=GetCursorPs n(this) ,它将不能再使用 Shift+ 左右这两个方向键来选择文本； 对于textarea onkeydown=GetCursorPsn(this)/textarea ，将不能再使用 Shift+上下左右四个方向键来选择文本。因为代码在获取了当前 光标到文本的startPoint后，调用rng.collapse( false);会改变文本筐内文本的 EditPoint。不过这个副作用基本不会给我们使用文 本框带来什么大的问题，所以基本不用太在意。 2。==== javascript 获取 textarea 光标位置，内容方法(IE, Firefox) 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. html head titleTEST/title style body,td{ font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; } /style vscript type=text/javascript var start=0; var end=0; function add(){ var textBox = document.getElementByld(ta); var pre = textBox.value.substr(0, start); var post = textBox.value.substr(end); textBox.value = pre + document.getElementByld(inputtext).value + post; } function savePos(textBox){ //如果是Firefox(1.5)的话，方法很简单 if(typeof(textBox.selectionStart) == number){ start = textBox.selectionStart; end = textBox.selectionEnd; } //下面是IE(6.0)的方法，麻烦得很，还要计算上\n else if(document.selection){ var range = document.selection.createRange(); if(range.parentElement().id == textBox.id)