Comment copier du contenu dans le presse-papiers dans JS
Cette fois, je vais vous montrer comment copier du contenu dans le presse-papiers avec JS. Quelles sont les précautions pour copier du contenu dans le presse-papiers avec JS. un cas pratique. Levez-vous et jetez un œil.
Méthodes courantes
Après vérification du tout-puissant Google, les méthodes courantes sont désormais principalement les deux suivantes :
Bibliothèque tierce : clipboard.js
Méthode native : document.execCommand()
Voyons comment ces deux méthodes sont utilisées.
clipboard.js
Ceci est le site officiel de clipboard : https://clipboardjs.com/, cela semble si simple.
Citation
Citation directe :
;Forfait :
, puis
npm install clipboard --save
import Clipboard from 'clipboard'Utiliser
Copier depuis la zone de saisie Maintenant qu'il y a une balise <input> sur la page, nous devons copier le contenu à l'intérieur, nous pouvons faire ceci :
<input id="demoInput" value="hello world"> <button class="btn" data-clipboard-target="#demoInput">点我复制</button>
import Clipboard from 'clipboard';
const btnCopy = new Clipboard('btn'); du <button> qui doit être copié. Comme son nom l'indique, le contenu est copié à partir de la balise entière. data-clipboard-target <input>
idCopier directement
Parfois, nous ne souhaitons pas copier le contenu de <input>, mais simplement obtenir la valeur directement à partir de la variable. Si dans Vue on pouvait faire ça :
Événement
Parfois, nous devons faire quelque chose après la copie, auquel cas nous avons besoin du support de lafonction de rappel
import Clipboard from 'clipboard';
const btnCopy = new Clipboard('btn');
this.copyValue = 'hello world';Ajoutez le code suivant à la fonction de traitement :
Le document mentionne également que si vous utilisez
sur une seule page, afin de rendre la gestion du// 复制成功后执行的回调函数
clipboard.on('success', function(e) {
console.info('Action:', e.action); // 动作名称，比如：Action: copy
console.info('Text:', e.text); // 内容，比如：Text：hello word
console.info('Trigger:', e.trigger); // 触发元素：比如：<button class="btn" :data-clipboard-text="copyValue">点我复制</button>
e.clearSelection(); // 清除选中内容
});
// 复制失败后执行的回调函数
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});plus élégante, pensez à détruire après utilisation.
Le presse-papiers n'est-il pas très simple à utiliser ? Cependant, n'est-il pas assez élégant d'utiliser des bibliothèques tierces supplémentaires uniquement pour une fonction de copie ? Utilisez ensuite des méthodes natives pour y parvenir.clipboard
Méthode document.execCommand()btn.destroy()
:
qui permet d'exécuter des commandes pour manipuler le contenu de la région modifiable
.
Cela signifie que vous pouvez exécuter des commandes pour manipuler le contenu de la zone modifiable. Notez qu'il s'agit d'une zone modifiable. MDN
La méthode renvoie une valeur booléenne indiquant si l'opération a réussi.bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
aCommandName : représente le nom de la commande, tel que : copier, couper, etc. (voir les commandes pour plus de commandes) ;
aShowDefaultUI : s'il faut afficher l'interface utilisateur, généralement
- aValueArgument : Certaines commandes nécessitent des paramètres supplémentaires, qui ne sont généralement pas utilisés
- <p> Compatibilité
- <p> La compatibilité de cette méthode n’était en fait pas très bonne auparavant, mais heureusement, elle est désormais fondamentalement compatible avec tous les navigateurs grand public et peut également être utilisée sur les terminaux mobiles.
Utiliser
从输入框复制
现在页面上有一个 <input> 标签，我们想要复制其中的内容，我们可以这样做：
<input id="demoInput" value="hello world"> <button id="btn">点我复制</button>
js代码
const btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
const input = document.querySelector('#demoInput');
input.select();
if (document.execCommand('copy')) {
document.execCommand('copy');
console.log('复制成功');
}
})其它地方复制
有的时候页面上并没有 <input> 标签，我们可能需要从一个 <p> 中复制内容，或者直接复制变量。
还记得在 execCommand() 方法的定义中提到，它只能操作可编辑区域，也就是意味着除了 <input>、