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; }
이 코드 다음 가정에 따라 작동합니다.
중첩된 요소가 있는 더 복잡한 콘텐츠를 수용하는 보다 포괄적인 솔루션을 보려면 다음을 참조하세요. 다음 스택 오버플로 답변: https://stackoverflow.com/a/4812022/96100
위 내용은 ContentEditable 요소에서 캐럿 위치를 어떻게 얻을 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!