ContentEditable 요소에서 캐럿 위치를 어떻게 얻을 수 있습니까?

Susan Sarandon
풀어 주다: 2024-11-25 07:10:12
원래의
264명이 탐색했습니다.

How Can I Get the Caret Position in a ContentEditable Element?

ContentEditable 요소에서 캐럿 위치 검색

contentEditable 요소 내에서 캐럿 위치를 설정하는 다양한 솔루션과 달리 현재 위치는 많은 개발자들에게 파악하기 어려운 것으로 입증되었습니다. 이 질문은 이러한 구체적인 지식 격차를 다룹니다.

키 누르기와 같은 사용자 입력 시 지정된 contentEditable 요소 내에서 캐럿 위치를 확인하려면 다음 코드를 활용할 수 있습니다.

function getCaretPosition(editableDiv) {
  var caretPos = 0,
    sel, range;
  if (window.getSelection) {
    sel = window.getSelection();
    if (sel.rangeCount) {
      range = sel.getRangeAt(0);
      if (range.commonAncestorContainer.parentNode == editableDiv) {
        caretPos = range.endOffset;
      }
    }
  } else if (document.selection && document.selection.createRange) {
    range = document.selection.createRange();
    if (range.parentElement() == editableDiv) {
      var tempEl = document.createElement("span");
      editableDiv.insertBefore(tempEl, editableDiv.firstChild);
      var tempRange = range.duplicate();
      tempRange.moveToElementText(tempEl);
      tempRange.setEndPoint("EndToEnd", range);
      caretPos = tempRange.text.length;
    }
  }
  return caretPos;
}
로그인 후 복사

이 코드 다음 가정에 따라 작동합니다.

  • 편집 가능한 div에는 추가 중첩 없이 단일 텍스트 노드가 포함되어 있습니다. 요소.
  • 편집 가능한 div의 CSS 공백 속성이 "pre"로 설정되지 않았습니다.

중첩된 요소가 있는 더 복잡한 콘텐츠를 수용하는 보다 포괄적인 솔루션을 보려면 다음을 참조하세요. 다음 스택 오버플로 답변: https://stackoverflow.com/a/4812022/96100

위 내용은 ContentEditable 요소에서 캐럿 위치를 어떻게 얻을 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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