커서가 ContentEditable의 시작 부분으로 재설정되는 것을 방지하는 방법``?-JS 튜토리얼-php.cn

How to Prevent the Cursor from Resetting to the Beginning of a ContentEditable ``?

ContentEditable

에 커서 위치 설정

contentEditable='on'

로 작업할 때 일반적으로 포커스를 다시 얻은 후 커서가 텍스트의 시작 부분으로 재설정되는 문제가 발생합니다. 이를 해결하기 위해 크로스 브라우저 솔루션이 등장했습니다.

해결책:

1. 커서 위치 저장:

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

로그인 후 복사

이 기능은

현재 선택 사항을 saveRange 변수에 저장합니다.

2. 커서 위치 복원:

function restoreSelection() {
  if (savedRange != null) {
    if (window.getSelection) { // non-IE
      var s = window.getSelection();
      s.removeAllRanges();
      s.addRange(savedRange);
    } else if (document.createRange) { // non-IE
      window.getSelection().addRange(savedRange);
    } else if (document.selection) { // IE
      savedRange.select();
    }
  }
}

로그인 후 복사

이 기능은

저장된 범위에 저장된 선택 항목을 복원합니다.

3. 클릭 이벤트 방지(선택 사항):

처음으로 재설정하는 대신 클릭 시 커서를 복원하려면 다음 기능을 사용할 수 있습니다.

var isInFocus = false;

function onDivBlur() {
  isInFocus = false;
}

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

로그인 후 복사

이 함수는 onblur, onclick 및 onmousedown 이벤트에 연결되며 클릭 이벤트가 커서 위치를 재설정하는 것을 방지합니다. 또한 선택 항목을 복원하여 커서가 중단된 위치에 위치하도록 합니다.

위 내용은 커서가 ContentEditable의 시작 부분으로 재설정되는 것을 방지하는 방법``?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천：php.cn

이전 기사：루프에서 비동기 데이터 검색을 어떻게 처리하고 응집력 있는 데이터 세트를 반환하기 전에 모든 쿼리가 완료되었는지 확인합니까? 다음 기사：MERN 스택을 사용하여 SaaS(Software as a Service) 플랫폼 생성

본 웹사이트의 성명

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

저자별 최신 기사

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

2253

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

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