콘텐츠 편집 가능한 요소의 끝으로 캐럿을 어떻게 이동합니까?

캐럿을 콘텐츠 편집 가능한 엔터티의 끝으로 이동

Gmail 메모와 같은 특정 웹 위젯에는 커서를 다음으로 이동하는 기능이 필요합니다. 콘텐츠 편집 가능한 요소의 끝. 입력 처리를 위한 솔루션이 존재하지만 콘텐츠 편집 가능 요소의 고유한 특성으로 인해 실패합니다.

이 문제를 해결하려면 콘텐츠 편집 가능 요소에 맞게 특별히 맞춤화된 솔루션이 필요합니다. 다행히도 이러한 요구를 충족하는 포괄적인 함수인 setEndOfContenteditable()이 있습니다. 이 함수는 범위와 선택 항목을 신중하게 사용하여 contenteditable 요소의 텍스트 콘텐츠를 조작하여 다양한 브라우저와의 호환성을 보장합니다.

구현:

setEndOfContenteditable() 함수는 작동합니다. 다양한 브라우저 버전에서:

• 최신 브라우저(Firefox, Chrome, Opera, Safari, IE 9 ):
  createRange() 메서드를 활용하여 보이지 않는 범위를 생성합니다. 전체 요소 콘텐츠. 그런 다음 범위의 끝점을 요소의 마지막 문자로 이동하기 위해 Collapse()가 적용됩니다. 마지막으로 범위가 현재 선택 항목에 추가됩니다.
• IE 8 이하:
  createTextRange() 메서드를 활용하여 전체 요소 콘텐츠를 덮는 보이지 않는 범위를 만듭니다. 이번에도 Collapse() 메서드를 적용하여 범위의 끝점을 요소 끝에 배치합니다. 마지막으로 범위가 선택되어 새로운 표시 선택 항목이 됩니다.

사용법:

setEndOfContenteditable() 함수를 사용하려면 대상 요소를 얻기만 하면 됩니다. 적용해 보세요.

elem = document.getElementById('txt1'); // Element to move the caret to the end of
setEndOfContenteditable(elem);

이 기술은 브라우저 버전이나 요소 콘텐츠 길이에 관계없이 캐럿을 콘텐츠 편집 가능한 요소의 끝으로 효율적으로 이동합니다.

위 내용은 콘텐츠 편집 가능한 요소의 끝으로 캐럿을 어떻게 이동합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!