js获取光标位置几种方法
js获取光标位置几种方法
js文章2009-04-01 15:41:56 阅读303 评论0 字号:大中小订阅
1。==================
使用TextRange获取输入框中光标的位置
===================
TextRange是用来表现H TML元素中文字的对象,虽然我们平时不太常用这个对象,可是它却在IE4.0中就已提供了。不过TextRange提供的调用方法却都比较晦涩,那么我们能拿它做些什么呢?
TextRange的传统用途是对用户在Web页上用鼠标圈选的文字内容的操作,比如变化、删除、新增等。但其经典的用途却是,在Web页面中查找文字(这个比较简单)和获取输入框光标的位置。其中后者又有可以衍生出很多更有用的用途,比如:限制输入的MaskTextBox,其核心技术点就是获取输入框的光标位置,然后使用正则表达式判断输入内容。还有我后面会介绍的"使用方向键在输入框矩阵中自然的导航",核心技术点也是获取输入框中的光标位置。
获取输入框中的光标位置的整个代码其实很短,只是这些对象和方法不太常用而已。
function GetCursorPsn(txb)
{
var slct = document.selection;
var rng = slct.createRange();
txb.select();
rng.setEndPoint("StartToStart", slct.createRange());
var psn = rng.text.length;
rng.collapse(false);
rng.select();
return psn;
}
要彻底的弄清楚TextRange的具体用法,需要了解与其相关的一些内容,请参考MSDN。
这里说一下使用这个GetCursorPsn()方法后,会给输入框操作带来的副作用。对于输入框,它将不能再使用Shift+左右这两个方向键来选择文本;对于,将不能再使用Shift+上下左右四个方向键来选择文本。因为代码在获取了当前光标到文本的startPoint后,调用rng.collapse(false);会改变文本筐内文本的EditPoint。不过这个副作用基本不会给我们使用文本框带来什么大的问题,所以基本不用太在意。
2。====javascript获取textarea光标位置,内容方法(IE, Firefox)========================
1. html>
2.
3.
4.
5. body,td{
6. font-family: verdana, arial, helvetica, sans-serif;
7. font-size: 12px;
8. }
9.
10.
11. var start=0;
12. var end=0;
13. function add(){
14. var textBox = document.getElementById("ta");
15. var pre = textBox.value.substr(0, start);
16. var post = textBox.value.substr(end);
17. textBox.value = pre + document.getElementById("inputtext").value + post;
18. }
19. function savePos(textBox){
20. //如果是Firefox(1.5)的话,方法很简单
21. if(typeof(textBox.selectionStart) == "number"){
22. start = textBox.selectionStart;
23. end = textBox.selectionEnd;
24. }
25. //下面是IE(6.0)的方法,麻烦得很,还要计算上'\n'
26. else if(document.selection){
27. var range = document.selection.createRange();
28. if(range.parentElement().id == textBox.id){
29. // create a selection of the whole textarea
30. var range_all = document.body.createTextRange();
31. range_all.moveToElementText(textBox);
32. //两个r ange,一个是已经选择的text(range),一个是整个textarea(range_all)
33. //range_https://www.360docs.net/doc/928441427.html,pareEndPoints()比较两个端点,如果range_all比r ange更往左(further to the left),
则 //返回小于0的值,则range_all往右移一点,直到两个range的start相同。
34. // calculate selection start point by moving beginning of range_all to beginning of range
35. for (start=0; range_https://www.360docs.net/doc/928441427.html,pareEndPoints("StartToStart", range) < 0; start++)
36. r ange_all.moveStart('char acter', 1);
37. // get number of line breaks from textarea start to selection start and add them to start
38. // 计算一下\n
39. for (var i = 0; i <= start; i ++){
40. if (textBox.value.charAt(i) == '\n')
41. start++;
42. }
43. // create a selection of the whole textarea
44. var range_all = document.body.createTextRange();
45. range_all.moveToElementText(textBox);
46. // calculate selection end point by moving beginning of range_all to end of range
47. for (end = 0; range_https://www.360docs.net/doc/928441427.html,pareEndPoints('StartToEnd', range) < 0; end ++)
48. range_all.moveStart('character', 1);
49. // get number of line breaks from textarea start to selection end and add them to end
50. for (var i = 0; i <= end; i ++){
51. if (textBox.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.
84.
85.