포커스 후 콘텐츠 편집 가능한 Div에서 커서 위치를 유지하는 방법은 무엇입니까?

ContentEditable <div>에서 커서 위치 설정

문제:

Content editable <div> 요소는 초점을 다시 얻을 때마다 커서 위치를 텍스트의 시작 부분으로 재설정하는 경향이 있습니다. 이는 커서를 이전 위치로 복원해야 하는 경우 바람직하지 않을 수 있습니다.

해결 방법:

이 문제를 해결하려면 다음과 같은 브라우저 간 솔루션을 사용할 수 있습니다.

1단계: 선택 항목 저장

이벤트 리스너(onmouseup 및 onkeyup)를 <div> 마우스 버튼을 놓거나 키를 놓을 때 현재 커서 위치(savedRange)를 캡처합니다.

2단계: 선택 복원

2단계( a): On Focus

이벤트 리스너(onfocus)를 <div> 이전에 저장된 선택 항목을 복원합니다.

2단계 (b): 클릭 시(선택 사항)

클릭 시 선택 항목을 유지하려면 추가 단계가 필요합니다.

• 클릭 이벤트(cancelEvent())를 취소하는 onclick 및 onmousedown 이벤트 리스너를 등록합니다.
• cancelEvent() 내부에서 저장된 선택 항목을 복원하고 isInFocus를 true로 설정합니다.
• 흐림(onblur)에서는 isInFocus를 false로 설정합니다.

전체 코드(클릭 시 선택 복원 포함):

<div>

var savedRange, isInFocus;

function saveSelection() {
  // ... (Selection saving logic as described in Step 1)
}

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

  if (savedRange != null) {
    // ... (Selection restoration logic as described in Step 2)
  }
}

function onDivBlur() {
  isInFocus = false;
}

function cancelEvent(e) {
  if (isInFocus === false && savedRange != null) {
    // ... (Event cancellation logic as described in Step 2 (b))
  }
}

위 내용은 포커스 후 콘텐츠 편집 가능한 Div에서 커서 위치를 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!