텍스트 영역에서 문자 기반 캐럿 위치를 어떻게 얻나요?

텍스트 영역에서 문자 기반 캐럿 위치 얻기

텍스트 영역 요소에서 캐럿 위치를 결정하는 것은 어려울 수 있으며, 특히 정확한 위치를 찾을 때 더욱 그렇습니다. 열 인덱스(문자)입니다. 이를 달성할 수 있는 방법은 다음과 같습니다.

Firefox 및 Safari의 경우

Firefox 및 Safari와 같은 Gecko 기반 브라우저는 텍스트 영역에서 SelectionStart 속성을 원활하게 제공합니다. 이 속성은 요소 시작 부분부터 문자의 캐럿 위치를 나타냅니다.

Internet Explorer의 경우

안타깝게도 Internet Explorer는 캐럿에 대한 직접적인 액세스를 제공하지 않습니다. 위치. 대신, 보다 복잡한 접근 방식을 사용해야 합니다.

• 선택 범위 생성: createRange()를 사용하여 선택 범위 개체를 생성합니다.
• 중복 선택: 비교를 위해 선택 범위의 복사본을 만듭니다. 목적.
• 선택 경계 이동: 요소 텍스트 시작 부분에 개행 문자를 포함하도록 중복 선택을 수정합니다.
• 선택 길이 비교: 원래 선택 길이에서 중복 선택 길이를 빼서 위치를 결정합니다. caret.

전체 코드 예

다음 JavaScript 코드는 문자에서 캐럿 위치를 검색하는 방법을 보여줍니다.

function getCaret(el) {
  if (el.selectionStart) {
    return el.selectionStart;
  } else if (document.selection) {
    el.focus();

    var r = document.selection.createRange();
    if (r == null) {
      return 0;
    }

    var re = el.createTextRange(),
        rc = re.duplicate();
    re.moveToBookmark(r.getBookmark());
    rc.setEndPoint('EndToStart', re);

    return rc.text.length;
  }
  return 0;
}

사용예

이 기능을 다음과 같이 활용할 수 있습니다. 그래서:

const textarea = document.getElementById('my-textarea');
const caretPosition = getCaret(textarea);

주변 문자열 검색

커서 또는 선택 영역 주변의 문자열을 얻으려면 substring() 함수를 활용하여 이전에 텍스트를 추출할 수 있습니다. 선정 도중, 선정 이후.

위 내용은 텍스트 영역에서 문자 기반 캐럿 위치를 어떻게 얻나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!