>웹 프론트엔드 >JS 튜토리얼 >jQuery를 사용하여 커서 위치를 설정하거나 텍스트 영역에서 텍스트를 선택하는 방법은 무엇입니까?

jQuery를 사용하여 커서 위치를 설정하거나 텍스트 영역에서 텍스트를 선택하는 방법은 무엇입니까?

Barbara Streisand
Barbara Streisand원래의
2024-12-15 13:35:14859검색

How to Set the Cursor Position or Select Text in a Text Area Using jQuery?

jQuery를 사용하여 텍스트 영역에서 커서 위치를 설정하는 방법

$.fn.selectRange() 함수를 사용하면 쉽게 설정할 수 있습니다. 커서 위치를 선택하거나 jQuery를 사용하여 텍스트 영역에서 텍스트 범위를 선택합니다.

사용 방법은 다음과 같습니다. it:

$.fn.selectRange = function(start, end) {
    if(end === undefined) {
        end = start;
    }
    return this.each(function() {
        if('selectionStart' in this) {
            this.selectionStart = start;
            this.selectionEnd = end;
        } else if(this.setSelectionRange) {
            this.setSelectionRange(start, end);
        } else if(this.createTextRange) {
            var range = this.createTextRange();
            range.collapse(true);
            range.moveEnd('character', end);
            range.moveStart('character', start);
            range.select();
        }
    });
};

이 함수를 사용하면 다음과 같이 단일 인수를 제공하여 커서 위치를 설정할 수 있습니다.

$('#elem').selectRange(3); // set cursor position

또는 다음과 같이 제공하여 텍스트 범위를 선택할 수 있습니다. 두 개의 인수:

$('#elem').selectRange(3,5); // select a range of text

이 함수는 브라우저에서 SelectionStart 및 SelectionEnd 속성을 지원하는지 확인하여 작동합니다. 그렇다면 이를 사용하여 커서 위치나 선택 범위를 설정합니다. 그렇지 않으면 대부분의 브라우저에서 지원되는 setSelectionRange() 메서드를 사용합니다. 마지막으로, 두 방법 중 어느 것도 사용할 수 없는 경우 함수는 Internet Explorer에서 사용할 수 있는 createTextRange() 메서드를 사용하게 됩니다.

다음은 이 함수를 사용하는 방법에 대한 몇 가지 편리한 예입니다.

  • 텍스트 영역의 모든 텍스트 선택:
$('#elem').selectRange(0, $('#elem').val().length);
  • 커서를 다음으로 설정 텍스트 영역에서 텍스트 끝:
$('#elem').selectRange($('#elem').val().length);
  • 텍스트 영역에서 특정 텍스트 범위 선택:
$('#elem').selectRange(3, 7);

다음을 수행할 수 있습니다. JsFiddle 및 JsBin에서 이 기능의 라이브 데모를 찾아보세요.

위 내용은 jQuery를 사용하여 커서 위치를 설정하거나 텍스트 영역에서 텍스트를 선택하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.