(一)獲取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
}
實現了選中區域獲取及設置方法後,其他如文字插入,替換的實現就比較簡單了。