Wie platziere ich das Caret-Zeichen am Ende des Textes in einem „inhaltsbearbeitbaren' Pre-Element konsistent in allen Browsern?

<p>

Einfügen eines Caretzeichens am Ende des browserübergreifenden Textes

<p>In HTML ist

contenteditable

Mit Elementen können Benutzer Text direkt innerhalb des Elements bearbeiten. Es kann jedoch zu browserübergreifenden Inkonsistenzen bei der Behandlung von Zeilenumbrüchen kommen.

Browserübergreifende Zeilenumbruchunterschiede

<p>Die Ausgabe von

contenteditable

Elemente variieren je nach Browser: Chrome platziert ein

<div>

Innerhalb des Zeilenumbruchs fügt Firefox ein

<br />

ein und Internet Explorer fügt ein

<p>

hinzu.

Einstellung Caret am Ende des Textes

<p>Um das Caret in allen Browsern einheitlich am Ende des Textes zu positionieren, verwenden Sie das folgende JavaScript Funktion:

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();
    }
}

Beispielverwendung

<p>Um diese Funktion zu nutzen, fügen Sie einen Ereignis-Listener an eine Schaltfläche an, die beim Klicken die Funktion aufruft, um die Einfügemarke am Ende des Textes zu platzieren:

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

Das obige ist der detaillierte Inhalt vonWie platziere ich das Caret-Zeichen am Ende des Textes in einem „inhaltsbearbeitbaren' Pre-Element konsistent in allen Browsern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!