집 > 기사 > 웹 프론트엔드 > 커서가 ContentEditable의 시작 부분으로 재설정되는 것을 방지하는 방법``?

커서가 ContentEditable의 시작 부분으로 재설정되는 것을 방지하는 방법``?

Barbara Streisand원래의: 2024-11-10 16:07:021027검색

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

if Event function this position issue

성명：

이전 기사：루프에서 비동기 데이터 검색을 어떻게 처리하고 응집력 있는 데이터 세트를 반환하기 전에 모든 쿼리가 완료되었는지 확인합니까?다음 기사：루프에서 비동기 데이터 검색을 어떻게 처리하고 응집력 있는 데이터 세트를 반환하기 전에 모든 쿼리가 완료되었는지 확인합니까?