ContentEditable Div에서 커서 위치를 설정하고 유지하는 방법은 무엇입니까?

contentEditable <div>에 커서 위치 설정

contentEditable <div>를 처리할 때 기본 브라우저 기능은 커서 위치를 텍스트의 시작 부분으로 재설정합니다. 초점을 되찾았을 때. 이 문제를 해결하려면 다음 해결 방법을 고려하십시오.

커서 위치 저장 및 복원:

1. 현재 위치 저장: onmouseup 및 onkeyup 이벤트에서는 현재 커서 위치를 saveRange 변수에 저장합니다.
2. 위치 복원: onfocus 이벤트에서는 saveRange에서 저장된 선택 항목을 복원합니다.

이 접근 방식을 사용하면 div가 포커스를 다시 얻을 때 마지막으로 알려진 위치에 커서가 배치됩니다.

클릭 처리:

div를 클릭할 때 선택 항목을 복원하려면 다음을 수행하세요. 추가 단계가 필요합니다:

1. 클릭 이벤트 취소: cancelEvent()를 onclick 및 onmousedown 이벤트에 연결합니다. 이 함수는 이러한 이벤트의 기본 동작을 방지하고 RestoreSelection()을 호출합니다.
2. 포커스 상태 추적: isInFocus 변수를 사용하여 div에 포커스가 있는지 확인합니다. div에 포커스가 없을 때만 클릭 이벤트를 취소하세요.

작업 코드:

<div>

var savedRange, isInFocus;

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

function restoreSelection() {
  isInFocus = true;
  document.getElementById("area").focus();

  if (savedRange) {
    if (window.getSelection) {
      var s = window.getSelection();
      s.removeAllRanges();
      s.addRange(savedRange);
    } else if (document.createRange) {
      window.getSelection().addRange(savedRange);
    } else if (document.selection) {
      savedRange.select();
    }
  }
}

function onDivBlur() {
  isInFocus = false;
}

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

위 내용은 ContentEditable Div에서 커서 위치를 설정하고 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!