Comment conserver la position du curseur dans un contenu modifiable `` dans les navigateurs ?-js tutoriel-php.cn

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

Copier après la connexion

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 &amp;&amp; savedRange != null) {
        if (e &amp;&amp; e.preventDefault) {
            e.stopPropagation();
            e.preventDefault();
        }
        else {
            window.event.cancelBubble = true;
        }
        restoreSelection();
        return false;
    }
}

Copier après la connexion

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!

Article précédent：Est-ce que `.then(function(a){ return a; })` est un No-Op dans les promesses ? Article suivant：Comment désactiver les liens HTML dans les navigateurs modernes ?

Déclaration de ce site Web

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

Derniers articles par auteur

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

2843

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

2971

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

2484

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...