js TextArea選択領域処理_javascriptスキル

(1) Textareaの選択範囲の開始点、または選択範囲がない場合の入力カーソル位置を取得
FirefoxやChromeなどIE以外のブラウザは選択をサポートしており、選択範囲を取得しますこの属性をサポートするには、TextRange オブジェクトの CompareEndPoints メソッドを使用して開始点を比較することで、この属性を間接的に取得する必要があります。

コードをコピーします コードは次のとおりです:

getStartPos : function( textarea )
{
if ( typeof textarea.selectionStart != 'unknown' )
{ // 非 IE
start = textarea.selectionStart;
}
else
{ // IE
var range = document.selection.createRange();
var range_textarea = document.body.createTextRange();
range_textarea .moveToElementText(textarea);// 開始点
を比較しますvar sel_start = 0 ; range_textarea .compareEndPoints('StartToStart' , range)
range_textarea .moveStart( 'character', 1); // else

return start;
}


ただし、注意すべき点は、chrome では、textarea が readonley に設定されている場合、入力カーソルは textarea に表示されず、返されたselectionStartとselectionEndは両方とも0です。.firefoxでは正常です。

(2) Textarea に選択範​​囲を設定

同様に、IE 以外のブラウザでは選択文字範囲を指定する setSelectionRange メソッドがサポートされていますが、IE ではサポートされていないため、 TextRange 操作でも実行されますが、ここで注意する必要があるのは、IE での Textarea の選択範囲の相対位置です。たとえば、次のコードは、最初に moveStart と moveEnd で開始点と終了点の両方を 0 に設定します。折りたたみ移動が有効になった後、開始点は変更されません。最初の moveEnd は移動区間の終了点を移動し、次に moveStart が移動します。区間の開始点 開始点が変更される前に、相対的な位置が変更されないことが保証されるため、理解しやすくなります。

コードをコピー コードは次のとおりです: /**

*テキストエリアの選択範囲を設定

*/
setSelectRange : function( textarea, start, end )
{
if ( typeof textarea.createTextRange != 'unknown' )// IE
{
var range = textarea.createTextRange(); // まず相対的な開始点を 0 に移動します。
range.moveStart( "character", 0)
range.moveEnd( "character", 0); // 移動します。開始するカーソル
range.moveEnd( "character", end);
range.moveStart( "character", start); // if
else if ( typeof textarea.setSelectionRange != '未定義' )
{
textarea.setSelectionRange(start, end)
textarea.focus(); // else
}


選択領域の取得と設定メソッドを実装すれば、テキストの挿入や置換などのその他の実装は比較的簡単になります。