여러 브라우저에서 일관되게 'contenteditable' 사전 요소의 텍스트 끝에 캐럿을 배치하는 방법은 무엇입니까?

<p>

텍스트 크로스 브라우저 끝에 캐럿 설정

<p>HTML에서는

contenteditable

요소를 사용하면 사용자가 요소 내에서 직접 텍스트를 편집할 수 있습니다. 그러나 줄 바꿈을 처리하는 방법에는 브라우저 간 불일치가 있을 수 있습니다.

브라우저 간 줄 바꿈 차이점

<p>

contenteditable

요소는 브라우저에 따라 다릅니다. Chrome에서는

<div>

줄바꿈 안에 Firefox는

<br />

를 삽입하고 Internet Explorer는

<p>

를 추가합니다.

설정 텍스트 끝의 캐럿

<p>모든 브라우저에서 텍스트 끝 부분에 캐럿을 일관되게 배치하려면 다음 JavaScript를 사용하십시오. 함수:

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();
    }
}

사용 예

<p>이 함수를 활용하려면 클릭 시 텍스트 끝에 캐럿을 배치하는 함수를 호출하는 버튼에 이벤트 리스너를 연결하세요.

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

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