여러 브라우저에서 콘텐츠 편집 가능한 요소의 텍스트 끝에 캐럿을 배치하는 방법은 무엇입니까?

브라우저 간 텍스트 끝에서 캐럿 위치 설정

소개

줄바꿈 삽입 및 텍스트 끝에서 캐럿 위치 설정은 브라우저마다 다를 수 있습니다. . 이 기사에서는 버튼을 클릭할 때 텍스트 끝에 캐럿을 설정하는 크로스 브라우저 솔루션을 살펴봅니다.

문제

Chrome, 과 같은 다양한 브라우저에서 Firefox 및 IE, 콘텐츠 편집 가능한 요소 내에 텍스트가 저장되고 표시되는 방식 다르다. 이로 인해 바람직하지 않은 줄바꿈이나 서식이 발생할 수 있습니다.

또한 버튼 클릭 후 텍스트 끝에 캐럿 위치를 설정하려면 브라우저 전반에 걸쳐 일관된 접근 방식이 필요합니다.

해결책

다음 JavaScript 함수는 캐럿을 끝에 배치하는 브라우저 간 솔루션을 제공합니다. text:

function placeCaretAtEnd(el) {
  el.focus();
  if (typeof window.getSelection != "undefined"
      && typeof document.createRange != "undefined") {
    var range = document.createRange();
    range.selectNodeContents(el);
    range.collapse(false);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
  } else if (typeof document.body.createTextRange != "undefined") {
    var textRange = document.body.createTextRange();
    textRange.moveToElementText(el);
    textRange.collapse(false);
    textRange.select();
  }
}

이 함수는 콘텐츠 편집 가능 요소(el)에 대한 참조를 입력으로 사용합니다. 최신 브라우저에 있는 getSelection 및 createRange 메소드를 확인합니다. 사용 가능한 경우 범위를 생성하고 요소의 전체 콘텐츠를 선택한 다음 범위를 끝까지 축소하고 선택 항목을 설정합니다.

이러한 메서드가 없는 레거시 브라우저의 경우 이 함수는 createTextRange 메서드를 사용하여 다음을 수행합니다. 같은 효과를 줍니다.

이 기능을 사용하려면 다음과 같이 버튼을 클릭할 때 호출되어야 합니다.

$(document).ready(function() {
  $('#insert_caret').click(function() {
    var ele = $('#content');
    placeCaretAtEnd(ele);
  });
});

위 내용은 여러 브라우저에서 콘텐츠 편집 가능한 요소의 텍스트 끝에 캐럿을 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!