Maison > interface Web > js tutoriel > le corps du texte

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

DDD
Libérer: 2024-11-10 00:37:02
original
482 Les gens l'ont consulté

How to Keep the Cursor Position in a Content Editable Div After 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>
Copier après la connexion
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))
  }
}
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!

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