


Comment conserver la position du curseur dans un `` ContentEditable?
Nov 12, 2024 am 08:59 AMMaintenir 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!

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Remplacer les caractères de chaîne en javascript

Tutoriel de configuration de l'API de recherche Google personnalisé

8 Superbes plugins de mise en page JQuery Page

Créez vos propres applications Web Ajax

Qu'est-ce que & # x27; ceci & # x27; en javascript?
