>웹 프론트엔드 >JS 튜토리얼 >텍스트 입력 필드에서 캐럿 위치를 얻는 방법은 무엇입니까?

텍스트 입력 필드에서 캐럿 위치를 얻는 방법은 무엇입니까?

Patricia Arquette
Patricia Arquette원래의
2024-12-07 10:39:11792검색

How to Get the Caret Position in a Text Input Field?

텍스트 입력 필드에서 캐럿 위치를 검색하는 방법

텍스트 입력 필드 내에서 커서 위치를 얻는 것은 다양한 작업에 필수적입니다. 양식 유효성 검사 및 텍스트 편집과 같은. jQuery 프레임워크는 이 문제에 대한 간단한 해결책을 제공합니다.

jQuery 메서드:

caretPosition() 플러그인은 캐럿 위치를 검색하는 편리한 방법입니다. 원하는 입력 필드에서 다음 함수를 호출하기만 하면 됩니다.

$("input#myInput").caretPosition();

이 메소드는 캐럿 위치를 입력 필드 내의 문자 인덱스를 나타내는 정수 값으로 반환합니다.

네이티브 브라우저 방법:

또는 기본 브라우저 방법을 사용하여 캐럿 위치를 검색할 수 있습니다. 이러한 방법은 브라우저에 따라 다르지만 가장 일반적인 방법은 다음과 같습니다.

  • Internet Explorer: 입력 필드의 SelectionStart 속성을 사용합니다.
  • Firefox: 입력의 SelectionStart 및 SelectionEnd 속성을 사용하세요. field.

예:

다음 예는 기본 JavaScript를 사용하여 캐럿 위치를 검색하는 방법을 보여줍니다.

function getCaretPosition(inputField) {
  // Initialize caret position to 0
  var caretPos = 0;

  // IE support
  if (document.selection) {
    inputField.focus();
    
    // Get empty selection range to find cursor position
    var selectionRange = document.selection.createRange();
    selectionRange.moveStart('character', -inputField.value.length);
    
    // Caret position is the length of the selection
    caretPos = selectionRange.text.length;
  }

  // Firefox support
  else if (inputField.selectionStart || inputField.selectionStart == '0') {
    // Caret position is the selection start or end, depending on the direction
    caretPos = inputField.selectionDirection == 'backward' ? inputField.selectionStart : inputField.selectionEnd;
  }

  return caretPos;
}

위 내용은 텍스트 입력 필드에서 캐럿 위치를 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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