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