快捷導(dǎo)航

js TextArea的選中區(qū)域處理

更新時間：2010年12月28日 23:30:40 作者：

js中對于TextArea的選中區(qū)域后進(jìn)行處理的代碼，需要的朋友可以參考下。

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

復(fù)制代碼代碼如下:

 
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; 
} 

　　但有點(diǎn)需要注意的是，在chrome下，如果textarea設(shè)為readonley，那textarea不會出現(xiàn)輸入光標(biāo)，返回的selectionStart與selectionEnd都為0.firefox下則正常。

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

復(fù)制代碼代碼如下:

 
　　 /** 
* 設(shè)置textarea的選中區(qū)域 
*/ 
setSelectRange : function( textarea, start, end ) 
{ 
if ( typeof textarea.createTextRange != 'undefined' )// IE 
{ 
var range = textarea.createTextRange(); 
// 先把相對起點(diǎn)移動到0處 
range.moveStart( "character", 0) 
range.moveEnd( "character", 0); 
range.collapse( true); // 移動插入光標(biāo)到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 
　　　} 