如何在跨瀏覽器中一致地將插入符號放在「contenteditable」預元素中的文字末尾？

跨瀏覽器在文字末尾設定插入符

在 HTML 中，

contenteditable

元素允許使用者直接在元素內編輯文字。但是，跨瀏覽器的換行符處理方式可能會不一致。

跨瀏覽器換行符差異

<p></p>

contenteditable

的輸出元素因瀏覽器而異：Chrome 放置了一個

<div> 。在換行符內，Firefox 會插入 <pre class="brush:php;toolbar:false"><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();
    }
}

用法範例

要使用此函數，請將事件偵聽器附加到按鈕，按一下該按鈕時，將呼叫該函數以將插入符號放置在文本末尾：

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