ContentEditable 요소에서 캐럿 위치를 프로그래밍 방식으로 설정하는 방법은 무엇입니까?

콘텐츠 편집 가능 요소에서 캐럿 위치 설정

콘텐츠 편집 가능 div에서 캐럿 위치 설정은 Range 및 Selection 개체를 사용하여 수행할 수 있습니다. 요소 내의 특정 위치에 캐럿을 설정하는 방법은 다음과 같습니다.

코드:

function setCaret() {
    var el = document.getElementById("editable")
    var range = document.createRange()
    var sel = window.getSelection()
    
    range.setStart(el.childNodes[2], 5)
    range.collapse(true)
    
    sel.removeAllRanges()
    sel.addRange(range)
}

설명:

• el은 콘텐츠 편집 가능 요소를 나타냅니다.
• range는 캐럿을 지정하는 데 사용되는 Range 객체입니다. position.
• sel은 선택 항목을 조작하는 데 사용되는 Selection 개체입니다.
• setStart()는 범위의 시작을 지정된 노드와 오프셋으로 설정합니다(el.childNodes[2] 및 5, 각각).
• collapse()는 시작 시 범위를 단일 지점으로 축소합니다. position.
• removeAllRanges()는 기존 선택 항목을 모두 제거합니다.
• addRange()는 생성된 범위를 선택 항목에 추가합니다.

예:

다음 HTML을 고려해보세요.

<div>

"포커스" 버튼을 누르면 JavaScript 함수 setCaret()가 호출되어 텍스트 두 번째 줄의 다섯 번째 문자에 캐럿이 배치됩니다.

위 내용은 ContentEditable 요소에서 캐럿 위치를 프로그래밍 방식으로 설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!