recherche

Maison >interface Web >js tutoriel >Comment empêcher le curseur de se réinitialiser au début d'un `` ContentEditable?

Comment empêcher le curseur de se réinitialiser au début d'un `` ContentEditable?

Barbara Streisand
Barbara Streisandoriginal
2024-11-10 16:07:021080parcourir

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

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

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 && savedRange != null) {
    e.stopPropagation();
    e.preventDefault();
    restoreSelection();
    return false;
  }
}

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!

if Event function this 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：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：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 ?

Articles Liés

Voir plus