Cet article vous apprendra comment implémenter la fonctionnalité de copie en JavaScript.
Méthode 1 : Utiliser du code JavaScript simple
Nous pouvons utiliser la méthodeClipboard.writeText()ouClipboard.write()de l'API Clipboard pour écraser le contenu du presse-papiers avec les données spécifiées.
Exemple
function myFunction() {
/* Obtenir le contenu texte */
var copyText = document.getElementById("myInput");
/* Sélectionner et copier le contenu */
copyText.select();
copyText.setSelectionRange(0, 99999); /* Paramètres pour les appareils mobiles */
/* Copier le contenu dans la zone de texte */
navigator.clipboard.writeText(copyText.value);
/* Afficher le contenu copié */
alert("Le texte copié est : " + copyText.value);
}
/* Obtenir le contenu texte */
var copyText = document.getElementById("myInput");
/* Sélectionner et copier le contenu */
copyText.select();
copyText.setSelectionRange(0, 99999); /* Paramètres pour les appareils mobiles */
/* Copier le contenu dans la zone de texte */
navigator.clipboard.writeText(copyText.value);
/* Afficher le contenu copié */
alert("Le texte copié est : " + copyText.value);
}
Essayez-le vous-même »
Une fois la copie terminée, vous pouvez utiliser un moyen plus convivial de notifier :
Exemple
function myFunction() {
var copyText = document.getElementById("myInput");
copyText.select();
copyText.setSelectionRange(0, 99999);
navigator.clipboard.writeText(copyText.value);
var tooltip = document.getElementById("myTooltip");
tooltip.innerHTML = "Contenu copié : " + copyText.value;
}
function outFunc() {
var tooltip = document.getElementById("myTooltip");
tooltip.innerHTML = "Cliquez sur le bouton pour copier";
}
var copyText = document.getElementById("myInput");
copyText.select();
copyText.setSelectionRange(0, 99999);
navigator.clipboard.writeText(copyText.value);
var tooltip = document.getElementById("myTooltip");
tooltip.innerHTML = "Contenu copié : " + copyText.value;
}
function outFunc() {
var tooltip = document.getElementById("myTooltip");
tooltip.innerHTML = "Cliquez sur le bouton pour copier";
}
Essayez-le vous-même »
Méthode 2 : Utilisation de la bibliothèque tierce clipboard.js (recommandée, forte compatibilité)
-
Site officiel de clipboard.js :https://clipboardjs.com/
Github de clipboard.js :https://github.com/zenorocha/clipboard.js
Nous pouvons télécharger clipboard.js et l'inclure dans le projet :
<script src="dist/clipboard.min.js.html"></script>
Bien sûr, une méthode encore plus simple consiste à utiliser directement une bibliothèque CDN domestique :
<script src="https://cdn.staticfile.org/clipboard.js/2.0.4/clipboard.min.js"></script>
Exemple
new ClipboardJS('#copyInput', {
text: function(trigger) {
return document.getElementById("myInput").value;
}
}).on('success', function(e) {
alert("Copie réussie !!!");
e.clearSelection();
}).on('error', fonction(e) {
alert('Error!');
});
text: function(trigger) {
return document.getElementById("myInput").value;
}
}).on('success', function(e) {
alert("Copie réussie !!!");
e.clearSelection();
}).on('error', fonction(e) {
alert('Error!');
});
Essayez-le vous-même »
clipboard.js prise en charge des navigateurs
