Maison > interface Web > js tutoriel > Comment définir et maintenir la position du curseur dans un div ContentEditable ?

Comment définir et maintenir la position du curseur dans un div ContentEditable ?

Linda Hamilton
Libérer: 2024-11-15 03:21:02
original
818 Les gens l'ont consulté

How to Set and Maintain Cursor Position in a ContentEditable Div?

Définir la position du curseur sur contentEditable <div>

Lorsque vous traitez un contentEditable <div>, la fonctionnalité par défaut du navigateur réinitialise la position du curseur au début du texte en retrouvant sa concentration. Pour résoudre ce problème, envisagez la solution suivante :

Stocker et restaurer la position du curseur :

  1. Enregistrer la position actuelle : Dans le fichier onmouseup et événements onkeyup, stocke la position actuelle du curseur dans une variable, savingRange.
  2. Restaurer Position : Dans l'événement onfocus, restaurez la sélection enregistrée à partir de savingRange.

Cette approche garantit que le curseur est positionné au dernier emplacement connu lorsque le div retrouve le focus.

Gestion des clics :

Pour restaurer la sélection en cliquant sur le div, les étapes supplémentaires suivantes sont nécessaire :

  1. Annuler les événements de clic : Attachez CancelEvent() aux événements onclick et onmousedown. Cette fonction empêche le comportement par défaut de ces événements et appelle restaurerSelection().
  2. Suivi de l'état du focus : Utilisez la variable isInFocus pour déterminer si le div est mis au point. Annulez uniquement les événements de clic lorsque le div n'est pas mis au point.

Code de travail :

<div>
Copier après la connexion
var savedRange, isInFocus;

function saveSelection() {
  savedRange = window.getSelection ? window.getSelection().getRangeAt(0) : document.selection.createRange();
}

function restoreSelection() {
  isInFocus = true;
  document.getElementById("area").focus();

  if (savedRange) {
    if (window.getSelection) {
      var s = window.getSelection();
      s.removeAllRanges();
      s.addRange(savedRange);
    } else if (document.createRange) {
      window.getSelection().addRange(savedRange);
    } else if (document.selection) {
      savedRange.select();
    }
  }
}

function onDivBlur() {
  isInFocus = false;
}

function cancelEvent(e) {
  if (isInFocus === false && savedRange) {
    if (e && e.preventDefault) {
      e.stopPropagation();
      e.preventDefault();
    } else {
      window.event.cancelBubble = true;
    }
    restoreSelection();
    return false;
  }
}
Copier après la connexion

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!

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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal