Comment empêcher le curseur de se réinitialiser au début d'un `` ContentEditable?-js tutoriel-php.cn

How to Prevent the Cursor from Resetting to the Beginning of a ContentEditable ``?

Définir la position du curseur sur ContentEditable

Lorsque vous travaillez avec un contentEditable='on'

, il est courant de rencontrez le problème de la réinitialisation du curseur au début du texte après avoir retrouvé le focus. Pour résoudre ce problème, une solution multi-navigateurs a vu le jour.

Solution :

1. Enregistrer la position du curseur :

function saveSelection() {
  if (window.getSelection) { // non-IE
    savedRange = window.getSelection().getRangeAt(0);
  } else if (document.selection) { // IE
    savedRange = document.selection.createRange();
  }
}

Copier après la connexion

Cette fonction s'attache aux événements onmouseup et onkeyup du

et enregistre la sélection actuelle dans la variable SaveRange.

2. Restaurer la position du curseur :

function restoreSelection() {
  if (savedRange != null) {
    if (window.getSelection) { // non-IE
      var s = window.getSelection();
      s.removeAllRanges();
      s.addRange(savedRange);
    } else if (document.createRange) { // non-IE
      window.getSelection().addRange(savedRange);
    } else if (document.selection) { // IE
      savedRange.select();
    }
  }
}

Copier après la connexion

Cette fonction s'attache à l'événement onfocus du

et restaure la sélection stockée dans savingRange.

3. Empêcher les événements de clic (facultatif) :

Si vous souhaitez que le curseur soit restauré au clic au lieu de réinitialiser au début, vous pouvez utiliser les fonctions suivantes :

var isInFocus = false;

function onDivBlur() {
  isInFocus = false;
}

function cancelEvent(e) {
  if (isInFocus == false &amp;&amp; savedRange != null) {
    e.stopPropagation();
    e.preventDefault();
    restoreSelection();
    return false;
  }
}

Copier après la connexion

Ces les fonctions s'attachent aux événements onblur, onclick et onmousedown et empêchent l'événement click de réinitialiser la position du curseur. Ils restaurent également la sélection, garantissant que le curseur est placé là où il s'était arrêté.

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!

source：php.cn

Article précédent：Comment gérer la récupération de données asynchrones en boucles et garantir que toutes les requêtes sont terminées avant de renvoyer un ensemble de données cohérent ? Article suivant：Création d'une plateforme SaaS (Software as a Service) à l'aide de la stack MERN

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

2240

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

2380

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

1989

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...