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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!