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

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

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

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

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

<div>
<p> 이제 텍스트 두 번째 줄의 다섯 번째 문자에 캐럿을 배치한다고 가정해 보겠습니다. 이를 달성하려면 다음 단계를 따르세요.</p>
<ol>
<li>
<p><strong>범위 개체 만들기:</strong></p>
<pre class="brush:php;toolbar:false">var range = document.createRange();

설정 선택 경계:

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

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

선택 설정:

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

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

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

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

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