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

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>

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

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!