如何在跨浏览器中一致地将插入符号放在'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'));
    }
});