Comment conserver la position du curseur dans un `` ContentEditable?-js tutoriel-php.cn

Comment conserver la position du curseur dans un `` ContentEditable?

Barbara Streisand

Libérer： 2024-11-12 08:59:02

original

311 Les gens l'ont consulté

How to Maintain Cursor Position in a ContentEditable ``?

Maintenir la position du curseur dans un contenu modifiable

Lorsque vous travaillez avec du contenu modifiable

éléments, il est souvent souhaitable de conserver la position du curseur une fois que l'élément a retrouvé le focus. Par défaut, les navigateurs réinitialisent généralement le curseur au début du texte lors du recentrage.

Présentation de la solution

Pour résoudre ce problème, nous stockons la position actuelle du curseur lorsque le div perd le focus et restaurez-le lorsqu'il retrouve le focus. Voici une implémentation qui fonctionne sur les principaux navigateurs :

var savedRange; // Variable to store the saved selection
var isInFocus; // Flag to track focus state

function saveSelection() {
  if (window.getSelection) {
    // Browser-specific logic to save the selected range
    savedRange = window.getSelection().getRangeAt(0);
  }
}

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

  if (savedRange != null) {
    // Browser-specific logic to restore the saved range
    if (window.getSelection) {
      var s = window.getSelection();
      s.removeAllRanges();
      s.addRange(savedRange);
    }
  }
}

// Optional code for selection restoration on click
function cancelEvent(e) {
  if (isInFocus == false && savedRange != null) {
    e.stopPropagation();
    e.preventDefault();
    restoreSelection();
  }
}

// Event handlers for saving and restoring selection
$(document).ready(function() {
  $("#area").focus(function() {
    isInFocus = true;
  });

  $("#area").blur(function() {
    isInFocus = false;
    saveSelection();
  });

  $("#area").mouseup(function() {
    saveSelection();
  });

  $("#area").keyup(function() {
    saveSelection();
  });

  $("#area").focusin(function() {
    restoreSelection();
  });

  // Optional event handlers for restoring selection on click
  $("#area").mousedown(function(e) {
    return cancelEvent(e);
  });

  $("#area").click(function(e) {
    return cancelEvent(e);
  });
});

Copier après la connexion

Cette solution couvre à la fois la restauration de la position du curseur lors du recentrage et le comportement facultatif de restauration de la sélection au clic. Il est compatible avec tous les principaux navigateurs et apporte une solution définitive au problème de perte de position du curseur dans un contenu modifiable

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!

Article précédent：Comment publier des données x-www-form-urlencoded avec Fetch ? Article suivant：Comment accéder dynamiquement aux variables globales par nom en JavaScript ?

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 numéros