如何在跨浏览器中一致地将插入符号放在'contenteditable”预元素中的文本末尾？

跨浏览器在文本末尾设置插入符

在 HTML 中，

contenteditable

元素允许用户直接在元素内编辑文本。但是，跨浏览器的换行符处理方式可能会不一致。

跨浏览器换行符差异

contenteditable

的输出元素因浏览器而异：Chrome 放置了一个

<div>&lt;/pre> 。在换行符内，Firefox 会插入 <pre class="brush:php;toolbar:false">&lt;br />&gt;&lt;/pre>，而 Internet Explorer 则会添加 <pre class="brush:php;toolbar:false">&lt;p&gt;&lt;/pre&gt;。<h3 id="设置文本结尾处的插入符号">设置文本结尾处的插入符号</h3>
<p>要在所有浏览器中将插入符号一致地定位在文本末尾，请使用以下 JavaScript函数：</p>
<pre class="brush:php;toolbar:false">function placeCaretAtEnd(el) {
    el.focus();
    if (typeof window.getSelection != "undefined"
            &amp;amp;&amp;amp; 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'));
    }
});

以上是如何在跨浏览器中一致地将插入符号放在'contenteditable”预元素中的文本末尾？的详细内容。更多信息请关注PHP中文网其他相关文章！