EN · DE · RU · FR · ES

#2760: select.js

projectforge-webapp/src/utilities/select.js Utilitaire DOM (export unique) · projectforge-webapp/src/utilities/select.js 17 lignes · 14 code · 2 commentaires · 1 vide
Un utilitaire de sélection de texte multi-navigateur qui sélectionne programmatiquement l'intégralité du contenu textuel d'un nœud DOM, permettant un comportement de clic-pour-copier pour les champs de texte en lecture seule. La fonction gère deux ères d'API navigateur : l'approche héritée d'Internet Explorer createTextRange et l'approche moderne basée sur les standards window.getSelection() / document.createRange(). Cette fonction est invoquée par le composant DynamicReadonlyField afin qu'un clic sur un champ en lecture seule sélectionne son texte pour un copier-coller facile.

Architecture

Double chemin de code

La fonction bifurque sur document.body.createTextRange — cette propriété n'existe que dans Internet Explorer (et les premières versions d'Edge). Si elle est présente, elle utilise l'objet TextRange propriétaire d'IE, appelant moveToElementText pour délimiter la plage au contenu du nœud, puis select() pour le surligner. Si la propriété est absente (tous les navigateurs modernes), elle utilise l'API de sélection W3C : crée un objet Range, appelle selectNodeContents sur le nœud cible, efface toute sélection existante et ajoute la nouvelle plage.

Contexte d'utilisation

Importé par les composants d'entrée DynamicLayout, spécifiquement DynamicReadonlyField. Lorsqu'un utilisateur clique sur un champ en lecture seule (par exemple, un numéro de centre de coût calculé ou un identifiant généré par le système), tout son contenu textuel est automatiquement sélectionné, permettant une copie immédiate via Ctrl+C / Cmd+C sans avoir à faire glisser la souris. Référence source pour l'algorithme : réponse Stack Overflow #987376.

Historique Git

CommitCe qui a changé
21305e884Ajout de deux commentaires : une attribution de source liant à la réponse Stack Overflow dont l'algorithme a été adapté, et un libellé en ligne // internet-explorer au-dessus de la branche createTextRange pour clarifier pourquoi deux API de sélection différentes sont utilisées. Aucun changement fonctionnel.
117f7fe25Création du fichier avec la fonction de sélection de texte multi-navigateur et son export par défaut. Cela faisait partie de l'implémentation du comportement « cliquer pour sélectionner » pour les champs en lecture seule dans la disposition de formulaire dynamique de l'application web.