recherche

Maison >interface Web >js tutoriel >Comment conserver la position du curseur dans un contenu modifiable `` dans les navigateurs ?

Comment conserver la position du curseur dans un contenu modifiable `` dans les navigateurs ?

Linda Hamilton
Linda Hamiltonoriginal
2024-11-10 14:54:03195parcourir

How to Retain Cursor Position in a ContentEditable `` Across Browsers?

Définir la position du curseur sur ContentEditable

Définir la position du curseur dans un contenuEditable

peut être difficile sur différents navigateurs. Le comportement par défaut place généralement le curseur au début du texte, quelle que soit la dernière position connue. Pour relever ce défi, une solution sur mesure est nécessaire.

Solution multi-navigateurs

Pour résoudre ce problème, envisagez la solution suivante :

  • Stockez la position actuelle du curseur lorsque le focus est perdu à l'aide de la fonction saveSelection().
  • Rétablissez la sélection lorsque le focus est retrouvé à l'aide de la fonction restaurerSelection().
function saveSelection() {
    if (window.getSelection) {
        savedRange = window.getSelection().getRangeAt(0);
    } else if (document.selection) { 
        savedRange = document.selection.createRange();  
    } 
}

function restoreSelection() {
    document.getElementById("area").focus();
    if (savedRange != null) {
        if (window.getSelection) {
            var s = window.getSelection();
            if (s.rangeCount > 0) 
                s.removeAllRanges();
            s.addRange(savedRange);
        } else if (document.createRange) {
            window.getSelection().addRange(savedRange);
        } else if (document.selection) {
            savedRange.select();
        }
    }
}

Cliquez sur Gestion des événements (facultatif)

Par défaut, en cliquant dans le champ contentEditable

déplacera le curseur vers l’emplacement cliqué. Si vous préférez conserver la position stockée du curseur même lors d'un clic, annulez les événements onclick et onmousedown à l'aide de la fonction suivante :

function cancelEvent(e) {
    if (isInFocus == false && savedRange != null) {
        if (e && e.preventDefault) {
            e.stopPropagation();
            e.preventDefault();
        }
        else {
            window.event.cancelBubble = true;
        }
        restoreSelection();
        return false;
    }
}

Utilisation

Incorporer ces fonctions dans votre code en attachant saveSelection() aux événements onmouseup et onkeyup du

, et restaurerSelection() à l'événement onfocus. Facultativement, attachez la fonction CancelEvent() aux événements onclick et onmousedown pour préserver la position du curseur lors des clics.

Cette solution fournit une approche complète et multi-navigateurs pour conserver la position du curseur dans contentEditable

éléments, améliorant l'expérience utilisateur lorsque vous travaillez avec des régions modifiables.

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!

if using Event function default this location position issue
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Est-ce que `.then(function(a){ return a; })` est un No-Op dans les promesses ?Article suivant：Est-ce que `.then(function(a){ return a; })` est un No-Op dans les promesses ?

Articles Liés

Voir plus