Comment conserver la position du curseur dans un contenu modifiable après le focus ?

Définition de la position du curseur sur ContentEditable <div>

Problème :

Contenu modifiable <div> les éléments ont tendance à réinitialiser la position du curseur au début du texte à chaque fois que le focus est retrouvé. Cela peut être indésirable lorsque le curseur doit être restauré à sa position précédente.

Solution :

Pour résoudre ce problème, la solution multi-navigateurs suivante peut être utilisée :

Étape 1 : Enregistrer la sélection

Attacher les écouteurs d'événement (onmouseup et onkeyup) au <div> pour capturer la position actuelle du curseur (savedRange) lorsque le bouton de la souris est relâché ou qu'une touche est relâchée.

Étape 2 : Restaurer la sélection

Étape 2 ( a) : On Focus

Attacher un écouteur d'événement (onfocus) au <div> qui restaure la sélection précédemment enregistrée.

Étape 2 (b) : au clic (facultatif)

Pour conserver la sélection au clic, des étapes supplémentaires sont requises :

• Enregistrez les écouteurs d'événements onclick et onmousedown qui annulent l'événement click (cancelEvent()).
• Dans CancelEvent(), restaurez la sélection enregistrée et définissez isInFocus sur true.
• En cas de flou (onblur), définissez isInFocus sur false.

Code complet (y compris la restauration de la sélection au clic) :

<div>

var savedRange, isInFocus;

function saveSelection() {
  // ... (Selection saving logic as described in Step 1)
}

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

  if (savedRange != null) {
    // ... (Selection restoration logic as described in Step 2)
  }
}

function onDivBlur() {
  isInFocus = false;
}

function cancelEvent(e) {
  if (isInFocus === false && savedRange != null) {
    // ... (Event cancellation logic as described in Step 2 (b))
  }
}

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!