js TextArea的選中區域處理

2019-11-21 00:01:01

字體：大中小

來源：轉載

供稿：網友

（一）獲取Textarea的選中區域起點或無選中時的輸入光標位置
　　非IE瀏覽器，如，firefox，chrome，支持 selectionStart 獲取選中區域的起點，而IE瀏覽器不支持該屬性，需要間接通過TextRange來獲得，利用TextRange對象的compareEndPoints方法來進行起點的比較可以實現。

復制代碼代碼如下:

 
getStartPos : function( textarea ) 
{ 
if ( typeof textarea.selectionStart != 'undefined' ) 
{ // 非IE 
start = textarea.selectionStart; 
} 
else 
{ // IE 
var range = document.selection.createRange(); 
var range_textarea = document.body.createTextRange(); 
range_textarea .moveToElementText(textarea); 
//比較start point 
for ( var sel_start = 0; range_textarea .compareEndPoints('StartToStart' , range) < 0; sel_start++) 
range_textarea .moveStart( 'character', 1); 
start = sel_start; 
} // else 

return start; 
} 

　　但有點需要注意的是，在chrome下，如果textarea設為readonley，那textarea不會出現輸入光標，返回的selectionStart與selectionEnd都為0.firefox下則正常。

（二）設置Textarea中選中的區域
　　類似的，非IE的瀏覽器支持setSelectionRange方法指定選中的字符范圍，而IE不支持，也是通過TextRange來操作,這里需要注意的是IE下Textarea的選中區間的相對位置問題。如下面的代碼是先moveStart,moveEnd把起點與終點都設為0，collapse移動生效后，起點不變，先moveEnd移動區間的終點，再moveStart移動區間的起點，在沒有改變起點point之前,可以保證相對位置不變，更容易理解些。

復制代碼代碼如下:

 
　　 /** 
* 設置textarea的選中區域 
*/ 
setSelectRange : function( textarea, start, end ) 
{ 
if ( typeof textarea.createTextRange != 'undefined' )// IE 
{ 
var range = textarea.createTextRange(); 
// 先把相對起點移動到0處 
range.moveStart( "character", 0) 
range.moveEnd( "character", 0); 
range.collapse( true); // 移動插入光標到start處 
range.moveEnd( "character", end); 
range.moveStart( "character", start); 
range.select(); 
} // if 
else if ( typeof textarea.setSelectionRange != 'undefined' ) 
　{ 
　　 textarea.setSelectionRange(start, end); 
　　 textarea.focus(); 
　} // else 
　　　} 