js TextArea 선택 영역 처리_javascript 기술

(1) 텍스트 영역의 선택된 영역의 시작점을 가져오거나 선택이 없을 때 입력 커서 위치를 가져옵니다
Firefox, Chrome 등 IE가 아닌 브라우저에서는 SelectionStart를 지원하여 그러나 IE 브라우저에서는 이 속성을 지원하지 않으므로 TextRange를 통해 간접적으로 가져와야 합니다. 이는 TextRange 개체의 CompareEndPoints 메서드를 사용하여 시작점을 비교하면 됩니다.

코드 복사 코드는 다음과 같습니다.

getStartPos : function( textarea )
{
if ( typeof textarea.selectionStart != 'undefine' )
{ // 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) < sel_start )
range_textarea .moveStart( 'character', 1); // else

return start
}


그러나 주의할 점은 Chrome에서 텍스트 영역이 readonley로 설정된 경우 입력 커서가 텍스트 영역에 나타나지 않는다는 것입니다. 반환된 SelectionStart와 SelectionEnd는 모두 0입니다. .firefox에서는 정상입니다.

(2) 텍스트 영역에서 선택 영역 설정
마찬가지로 IE가 아닌 브라우저에서는 선택한 문자 범위를 지정하는 setSelectionRange 메서드를 지원하지만 IE에서는 지원하지 않으며, 이 작업도 TextRange 작업을 통해 수행됩니다. 여기서 주의해야 할 것은 IE에서 선택한 Textarea 간격의 상대적 위치입니다. 예를 들어 다음 코드는 먼저 moveStart 및 moveEnd를 시작점과 끝점을 모두 0으로 설정합니다. 축소 이동이 적용된 후 시작점은 변경되지 않고 먼저 moveEnd가 이동 간격의 끝점을 이동한 다음 moveStart가 이동합니다. 간격의 시작점 시작점이 변경되기 전에는 상대 위치가 변경되지 않고 유지되므로 이해하기 쉽습니다.

코드 복사 코드는 다음과 같습니다.

　 /**

* 텍스트 영역의 선택 영역 설정
*/
setSelectRange : function( textarea, start, end )
{
if ( typeof textarea.createTextRange != 'undefine' )// 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 != 'undefine' )
{
textarea.setSelectionRange(start, end)
textarea.focus()} // else
}


선택한 영역 획득 및 설정 방법을 구현한 후에는 텍스트 삽입 및 교체와 같은 다른 구현이 비교적 간단합니다.