如何在跨浏览器中一致地将插入符号放在'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中文网其他相关文章！