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

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

Patricia Arquette

發布： 2024-11-23 02:31:10

原創

847 人瀏覽過

How to Place the Caret at the End of Text in a `contenteditable` Pre Element Consistently Across Browsers?

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

在 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"
            &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中文網其他相關文章！