clipboard.js est un plug-in qui copie le texte dans le presse-papiers sans flash. Cet article vous présente principalement l'utilisation de base de clipboard.js. J'espère qu'il pourra vous aider.
<script src="js/clipboard.min.js"></script>
Vous devez d'abord l'instancier en passant un sélecteur DOM, un élément HTML ou une liste d'éléments HTML.
new Clipboard('.btn');
1 Utilisez un élément comme déclencheur pour copier le texte d'un autre élément. L'attribut data-clipboard-target doit être suivi du sélecteur d'attribut
<!-- Target --> <input id="foo" value="https://github.com/zenorocha/clipboard.js.git"> <!-- Trigger --> <button class="btn" data-clipboard-target="#foo"> </button>
<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>
<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
Cut to clipboard
</button><button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
Copy to clipboard
</button>2 Affichez des commentaires d'utilisateurs ou capturez la sélection après l'opération de copie/coupe. Opération, texte, élément déclencheur
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});<body>
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
<!-- Trigger -->
<button id='foo_1' class="btn" data-clipboard-target="#foo">
</button>
</body>
<script>
new Clipboard('.btn', {
text: function(trigger) {
if(trigger.getAttribute('id')=='foo_1'){
return 1;
}else{
return 2;
}
}
});
</script>clipboard.js utilise des pages HTML pour copier des informations dans le presse-papiers
ZeroClipboard.js utilise un flash pour copier plusieurs zones de texte
Bibliothèque de copier-coller JavaScript Clipboard.js sans astuces Flash_javascript
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
