브라우저 전반에 걸쳐 ContentEditable``에서 커서 위치를 유지하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

How to Retain Cursor Position in a ContentEditable `` Across Browsers?

ContentEditable

에 커서 위치 설정

contentEditable

내에서 커서 위치 설정 다양한 브라우저에서 어려울 수 있습니다. 기본 동작은 일반적으로 마지막으로 알려진 위치에 관계없이 커서를 텍스트 시작 부분에 배치합니다. 이러한 과제를 극복하려면 맞춤형 솔루션이 필요합니다.

크로스 브라우저 솔루션

이 문제를 해결하려면 다음 솔루션을 고려하세요.

saveSelection() 함수를 사용하여 포커스를 잃었을 때 현재 커서 위치를 저장합니다.
restoreSelection() 함수를 사용하여 포커스를 다시 얻었을 때 선택을 다시 설정합니다.

function saveSelection() {
    if (window.getSelection) {
        savedRange = window.getSelection().getRangeAt(0);
    } else if (document.selection) { 
        savedRange = document.selection.createRange();  
    } 
}

function restoreSelection() {
    document.getElementById("area").focus();
    if (savedRange != null) {
        if (window.getSelection) {
            var s = window.getSelection();
            if (s.rangeCount > 0) 
                s.removeAllRanges();
            s.addRange(savedRange);
        } else if (document.createRange) {
            window.getSelection().addRange(savedRange);
        } else if (document.selection) {
            savedRange.select();
        }
    }
}

로그인 후 복사

클릭 이벤트 처리(선택 사항)

기본적으로 contentEditable

클릭한 위치로 커서가 이동합니다. 클릭 시에도 저장된 커서 위치를 유지하려면 다음 함수를 사용하여 onclick 및 onmousedown 이벤트를 취소하세요.

function cancelEvent(e) {
    if (isInFocus == false &amp;&amp; savedRange != null) {
        if (e &amp;&amp; e.preventDefault) {
            e.stopPropagation();
            e.preventDefault();
        }
        else {
            window.event.cancelBubble = true;
        }
        restoreSelection();
        return false;
    }
}

로그인 후 복사

사용

이러한 기능을

의 onmouseup 및 onkeyup 이벤트에 saveSelection()을 연결하고 onfocus 이벤트에 RestoreSelection()을 연결하여 코드를 생성합니다. 선택적으로 cancelEvent() 함수를 onclick 및 onmousedown 이벤트에 연결하여 클릭 시 커서 위치를 유지합니다.

이 솔루션은 contentEditable

내에서 커서 위치를 유지하는 포괄적인 크로스 브라우저 접근 방식을 제공합니다. 요소를 사용하여 편집 가능한 영역으로 작업할 때 사용자 경험을 향상시킵니다.

위 내용은 브라우저 전반에 걸쳐 ContentEditable``에서 커서 위치를 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천：php.cn

이전 기사：`.then(function(a){ return a; })`는 Promise에서 No-Op입니까? 다음 기사：최신 브라우저에서 HTML 링크를 어떻게 비활성화할 수 있습니까?

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

저자별 최신 기사

에서 2024-04-29 11:01:01

1857

Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?

에서 2024-04-23 00:22:19