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

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

Patricia Arquette

Libérer： 2024-11-23 02:31:10

original

846 Les gens l'ont consulté

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

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

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

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

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

Copier après la connexion

Exemple d'utilisation

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

Copier après la connexion

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!