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

Maintenir la position du curseur dans un contenu modifiable <div>

Lorsque vous travaillez avec du contenu modifiable <div> é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);
  });
});

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 <div>.

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!