> 웹 프론트엔드 > JS 튜토리얼 > jQuery 텍스트 영역에서 커서 위치를 어떻게 설정할 수 있나요?

jQuery 텍스트 영역에서 커서 위치를 어떻게 설정할 수 있나요?

DDD
풀어 주다: 2024-12-28 05:55:13
원래의
126명이 탐색했습니다.

How Can I Set the Cursor Position in a jQuery Text Area?

jQuery 텍스트 영역에서 커서 위치 설정

과제:

텍스트에서 커서 위치를 설정하는 방법이 필요합니다. jQuery를 사용하는 영역입니다. 원하는 동작은 필드에 초점이 맞춰졌을 때 특정 오프셋에 커서를 위치시키는 것입니다.

jQuery 솔루션:

$.fn.setCursorPosition = function(pos) {
  if (this.setSelectionRange) {
    this.setSelectionRange(pos, pos);
  } else if (this.createTextRange) {
    var range = this.createTextRange();
    range.collapse(true);
    if (pos < 0) {
      pos = $(this).val().length + pos;
    }
    range.moveEnd("character", pos);
    range.moveStart("character", pos);
    range.select();
  }
};
로그인 후 복사

사용법:

$('#input').focus(function() {
  $(this).setCursorPosition(4);
});
로그인 후 복사

이렇게 하면 커서가 텍스트의 네 번째 문자 뒤에 위치하게 됩니다. 필드.

대체 솔루션:

$.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, 5); // select a range of text
$('#elem').selectRange(3); // set cursor position
로그인 후 복사

위 내용은 jQuery 텍스트 영역에서 커서 위치를 어떻게 설정할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿