
Dans cet article, je vais expliquer en détail comment fonctionne le fragment copyToClipboard de 30 secondes de code . Vous pouvez trouver le code source et de nombreuses autres méthodes utiles dans le référentiel de projet.
30 secondes de code: Fragments javascript que vous pouvez comprendre en 30 secondes ou moins Principales fonctionnalités
Une chose qui se présente La création la plus fréquente de sites Web consiste à copier du texte dans le Presse-papiers. sans que l'utilisateur ne le sélectionne ou n'appuie pas sur la combinaison de touches appropriée sur son clavier. Javascript peut le faire facilement en cinq étapes:
- Créez un élément
pour le joindre au document. Définissez sa valeur
dans la chaîne à copier dans le presse-papiers. - Ajoutez cet élément
au document HTML actuel. - Utilisez
HTMLInputElement.select () [19659009] pour sélectionner le contenu de l'élément
. - Utilisez
pour copier le contenu deDocument.execCommand (& copy # 39;)
dans le Presse-papiers. - Supprimez l'élément de document [19659008]
La version la plus simple de cette méthode devrait ressembler à ceci:
const copyToClipboard = str => {
const el = document .createElement ( & # 39; textarea & # 39; );
valeur el = str;
document .body.appendChild (el);
el.select ();
document .execCommand ( & # 39; copier & [399023]);
document .body.removeChild (el);
};
(implémentation de base de la méthode copyToClipboard)
Notez que cette méthode ne fonctionnera pas partout, mais uniquement à la suite d'une action de l'utilisateur (comme dans un détecteur d'événements
click
). , en raison de son fonctionnement Document.execCommand ()
. Rendre l'élément attaché invisible
Si vous essayez la méthode ci-dessus, vous verrez probablement quelques scintillements lorsque l'élément est ajouté
puis supprimé. Ce problème est particulièrement grave pour les lecteurs d’écran, car il peut causer des problèmes vraiment gênants. La prochaine étape logique consiste donc à utiliser des CSS pour rendre cet élément invisible et à le faire en lecture seule
au cas où les utilisateurs essaieraient de le compliquer: const copyToClipboard = str => {
const el = document .createElement ( & # 39; textarea & # 39; );
valeur el = str;
el.setAttribute ( & # 39; lire seulement & # 39; & # 39; );
el.style.position = & # 39; absolue & # 39; ;
el.style.left = & # 39; - 9999px & # 39; ;
document .body.appendChild (el);
el.select ();
document .execCommand ( & # 39; copier & [399023]);
document .body.removeChild (el);
};
(implémentation de copyToClipboard sans afficher la zone de texte)
Enregistrez et restaurez la sélection du document d'origine
const copyToClipboard = str => {>
const el = document .createElement ( & # 39; textarea & # 39; ); // Crée un élément
el.value = str; // Définissez sa valeur dans la chaîne que vous souhaitez copier
el.setAttribute ( & # 39; lire seulement & # 39; & # 39; ); // Rendez-le inviolable en lecture seule
el.style.position = & # 39; absolue & # 39; ;
el.style.left = & # 39; - 9999px & # 39; ; // Décalez l'écran pour le rendre invisible
document .body.appendChild (el); // Ajoute l'élément
const selected =
document .getSelection (). RangeCount> 0 // Vérifier s'il y a un contenu précédemment sélectionné
? document .getSelection (). GetRangeAt ( 0 ) // Sélection du magasin si trouvé .
: false ; // Marquez comme faux de savoir qu'il n'y avait pas de sélection avant
el.select (); // Sélectionnez le
document .execCommand ( & # 39; copy & # 39; Copy & [399023]); // Copier: ne fonctionne qu'à la suite d'une action de l'utilisateur (par exemple, des événements de clic)
document .body.removeChild (el); // Supprimer l'item
si (sélectionné) { // S'il y avait une sélection avant la copie du document
.getSelection (). RemoveAllRanges (); // Désélectionne tout dans le document HTML
document .getSelection (). AddRange (sélectionné); // Restaure la sélection d'origine
}
};
(Forme finale de copyToClipboard avec stockage de sélection)
Et c'est tout ce qu'il y a à faire. En moins de 20 lignes de code, nous avons créé l'une des méthodes les plus couramment utilisées dans le développement front-end.
Si vous aimez cet article, consultez 30 secondes de code pour obtenir davantage de fragments de code utiles pour vos projets Javascript!
[ad_2]