콘텐츠 편집 가능한 요소에 프로그래밍 방식으로 캐럿을 배치하려면 어떻게 해야 합니까?

콘텐츠 편집 가능 요소의 특정 위치에 캐럿 배치

콘텐츠 편집 가능 요소를 다룰 때 커서(캐럿)를 설정하는 기능 특정 위치로 이동하는 것이 중요할 수 있습니다. 그러나 이를 달성하는 것은 간단하지 않을 수 있습니다.

대부분의 웹 브라우저에서는 Range 및 Selection 개체를 활용하는 것이 핵심입니다. 각 선택 경계를 노드로 지정하고 해당 노드 내의 오프셋을 지정하면 캐럿의 배치를 제어할 수 있습니다.

설명하기 위해 contenteditable div가 있는 간단한 HTML 예를 고려해 보세요.

<div>

이제 텍스트 두 번째 줄의 다섯 번째 문자에 캐럿을 배치한다고 가정해 보겠습니다. 이를 달성하려면 다음 단계를 따르세요.

1. 범위 개체 만들기:

   var range = document.createRange();

2. 설정 선택 경계:

   var myDiv = document.getElementById("editable");
   range.setStart(myDiv.childNodes[2], 5);
   range.collapse(true);

   • myDiv.childNodes[2]는 텍스트의 두 번째 줄을 참조합니다.
   • range.setStart()는 선택 범위의 시작을 다음으로 설정합니다. 해당 노드 내의 다섯 번째 문자입니다.
   • range.collapse(true)는 범위를 캐럿으로 축소합니다. position.

3. 선택 설정:

   var sel = window.getSelection();
   sel.removeAllRanges();
   sel.addRange(range);

   • window.getSelection()은 Selection 개체를 반환합니다.
   • sel.removeAllRanges()는 기존 항목을 제거합니다. 선택.
   • sel.addRange(range)는 새로운 선택 범위를 설정합니다.

4. 함수 트리거:
   연결 위의 코드를 클릭 이벤트에 버튼:

   document.getElementById("button").addEventListener("click", setCaret);

이제 이 단계를 수행하면 콘텐츠 편집 가능한 요소 내에서 프로그래밍 방식으로 캐럿 위치를 설정할 수 있습니다.

위 내용은 콘텐츠 편집 가능한 요소에 프로그래밍 방식으로 캐럿을 배치하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!