jQuery를 사용하여 텍스트 영역에서 커서 위치를 설정하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

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

DDD

풀어 주다： 2024-12-08 14:14:10

원래의

768명이 탐색했습니다.

How to Set the Cursor Position in Text Areas Using jQuery?

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

사용자가 텍스트 필드의 특정 부분에 집중하도록 하려면 커서를 다음 위치에 배치해야 할 수 있습니다. 필드 내의 특정 오프셋. jQuery를 사용하여 이를 달성하려면 setCursorPosition 함수를 구현할 수 있습니다.

$.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);
});

로그인 후 복사

이 예에서 #input 필드가 포커스를 받으면 커서는 네 번째 문자 뒤에 위치하게 됩니다. 0).

대체 접근 방식은 허용된 답변에 제공된 selectRange 기능을 사용하는 것입니다.

$.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를 사용하여 커서 위치를 설정하고 텍스트 필드 내에서 텍스트 선택을 조작하는 다양한 방법을 제공합니다.

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