javascript获取textarea中光标的位置 兼容

 1 var start=0; 
 2 var end=0; 
 3 function add(){ 
 4 var textBox = document.getElementById("ta"); 
 5 var pre = textBox.value.substr(0, start); 
 6 var post = textBox.value.substr(end); 
 7 textBox.value = pre + document.getElementById("inputtext").value + post; 
 8 } 
 9 function savePos(textBox){ 
10 //如果是Firefox(1.5)的话，方法很简单 
11 if(typeof(textBox.selectionStart) == "number"){ 
12 start = textBox.selectionStart; 
13 end = textBox.selectionEnd; 
14 } 
15 //下面是IE(6.0)的方法，麻烦得很，还要计算上'\n' 
16 else if(document.selection){ 
17 var range = document.selection.createRange(); 
18 if(range.parentElement().id == textBox.id){ 
19 // create a selection of the whole textarea 
20 var range_all = document.body.createTextRange(); 
21 range_all.moveToElementText(textBox); 
22 //两个range，一个是已经选择的text(range)，一个是整个textarea(range_all) 
23 //range_all.compareEndPoints()比较两个端点，如果range_all比range更往左(further to the left)，则 //返回小于0的值，则range_all往右移一点，直到两个range的start相同。 
24 // calculate selection start point by moving beginning of range_all to beginning of range 
25 for (start=0; range_all.compareEndPoints("StartToStart", range) < 0; start++) 
26 range_all.moveStart('character', 1); 
27 // get number of line breaks from textarea start to selection start and add them to start 
28 // 计算一下\n 
29 for (var i = 0; i <= start; i ++){ 
30 if (textBox.value.charAt(i) == '\n') 
31 start++; 
32 } 
33 // create a selection of the whole textarea 
34 var range_all = document.body.createTextRange(); 
35 range_all.moveToElementText(textBox); 
36 // calculate selection end point by moving beginning of range_all to end of range 
37 for (end = 0; range_all.compareEndPoints('StartToEnd', range) < 0; end ++) 
38 range_all.moveStart('character', 1); 
39 // get number of line breaks from textarea start to selection end and add them to end 
40 for (var i = 0; i <= end; i ++){ 
41 if (textBox.value.charAt(i) == '\n') 
42 end ++; 
43 } 
44 } 
45 } 
46 document.getElementById("start").value = start; 
47 document.getElementById("end").value = end; 
48 } 
49 
50 

 

 

 

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