콘텐츠 편집 가능한 요소에서 캐럿 조작
문제: 캐럿을 콘텐츠 끝으로 효율적으로 이동할 수 있는 방법은 무엇입니까? Gmail 메모의 동작을 모방하는 contenteditable 요소 widget?
StackOverflow는 입력 요소에는 작동하지만 콘텐츠 편집 가능 요소에는 실패하는 솔루션을 제공합니다. 이 기사에서는 특히 contenteditable 요소에 대한 맞춤형 접근 방식을 제시합니다.
해결책:
contenteditable을 지원하는 브라우저의 경우 다음 JavaScript 기능을 사용하면 원하는 캐럿 이동을 수행할 수 있습니다.
function setEndOfContenteditable(contentEditableElement) { // Determine browser support var range, selection; if (document.createRange) { // Modern browsers range = document.createRange(); range.selectNodeContents(contentEditableElement); range.collapse(false); // Collapse to end of range selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); } else if (document.selection) { // IE 8 and lower range = document.body.createTextRange(); range.moveToElementText(contentEditableElement); range.collapse(false); // Collapse to end of range range.select(); } }
사용법 예:
ID가 'txt1'인 요소의 끝으로 캐럿을 이동하려면:
elem = document.getElementById('txt1'); setEndOfContenteditable(elem);
위 내용은 ContentEditable 요소의 끝으로 캐럿을 이동하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!