Comment placer le curseur à la fin du texte dans un pré-élément « contenteditable » de manière cohérente dans tous les navigateurs ?

<p>

Définition du signe d'insertion à la fin du texte multi-navigateur

<p>En HTML,

contenteditable

Les éléments permettent aux utilisateurs de modifier le texte directement dans l'élément. Cependant, il peut y avoir des incohérences entre les navigateurs dans la façon dont les sauts de ligne sont gérés.

Différences de saut de ligne entre les navigateurs

<p>La sortie de

contenteditable

les éléments varient selon les navigateurs : Chrome place un

<div>

dans le saut de ligne, Firefox insère un

<br />

et Internet Explorer ajoute un

<p>

.

Paramètre Caret à la fin du texte

<p>Pour positionner systématiquement le caret à la fin du texte dans tous les navigateurs, utilisez ce qui suit Fonction 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();
    }
}

Exemple d'utilisation

<p>Pour utiliser cette fonction, attachez un écouteur d'événement à un bouton qui, lorsque vous cliquez dessus, appelle la fonction pour placer le curseur à la fin du texte :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!