Comment déplacer le curseur à la fin d'un élément ContentEditable ?

Manipulation du curseur dans les éléments modifiables

Problème :Comment déplacer efficacement le curseur à la fin d'un élément contenteditable, imitant le comportement trouvé dans les notes de Gmail widget ?

StackOverflow propose des solutions qui fonctionnent pour les éléments d'entrée mais échouent avec les éléments modifiables par le contenu. Cet article présente une approche sur mesure spécifiquement pour les éléments modifiables par le contenu.

Solution :

Pour les navigateurs prenant en charge le contenu modifiable, la fonction JavaScript suivante peut accomplir le mouvement de curseur souhaité :

function setEndOfContenteditable(contentEditableElement) {
    // Determine browser support
    var range, selection;
    if (document.createRange) {
        // Modern browsers
        range = document.createRange();
        range.selectNodeContents(contentEditableElement);
        range.collapse(false); // Collapse to end of range
        selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
    } else if (document.selection) {
        // IE 8 and lower
        range = document.body.createTextRange();
        range.moveToElementText(contentEditableElement);
        range.collapse(false); // Collapse to end of range
        range.select();
    }
}

Exemple d'utilisation :

Pour déplacer le curseur vers la fin d'un élément avec l'ID 'txt1' :

elem = document.getElementById('txt1');
setEndOfContenteditable(elem);

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!