<script src="dist/clipboard.min.js"></script>
npm install clipboard --save , puis import Clipboard from 'clipboard';<p> Copier depuis la zone de saisie en utilisant <p> Il y a maintenant une balise <input> sur la page et nous devons copier le contenu à l'intérieur, nous pouvons le faire :
<input id="demoInput" value="hello world"> <button class="btn" data-clipboard-target="#demoInput">点我复制</button>
import Clipboard from 'clipboard'; const btnCopy = new Clipboard('btn');
<button> et que sa valeur doit être copié data-clipboard-target <input>, comme son nom l'indique, copie le contenu de la balise entière. id<p>Copier directementParfois, nous ne voulons pas copier le contenu de <input>, mais simplement obtenir la valeur directement de la variable. Si nous pouvons faire cela dans Vue : <p><button class="btn" :data-clipboard-text="copyValue">点我复制</button>
import Clipboard from 'clipboard'; const btnCopy = new Clipboard('btn'); this.copyValue = 'hello world';
// 复制成功后执行的回调函数
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);
});clipboard après utilisation. btn.destroy() Le Presse-papiers est 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. <p><p>Méthode document.execCommand()Regardez d'abord comment cette méthode est définie sur <p> : MDNqui permet d'exécuter des commandes pour manipuler le contenu de la région modifiable.<p>
Copier depuis la zone de saisie en utilisant <p>Il y a maintenant une balise <input> à copier Pour le contenu, on peut faire ceci : <p><input id="demoInput" value="hello world"> <button id="btn">点我复制</button>
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> N'oubliez pas qu'il a été mentionné dans la définition de la méthode qu'elle ne peut fonctionner que sur des zones modifiables, ce qui signifie qu'elle ne peut être utilisée que pour les champs de saisie tels que <input> ; Cette méthode. <p>execCommand() En ce moment, nous devons sauver le pays. <p><p>code js<p>const btn = document.querySelector('#btn');
btn.addEventListener('click',() => {
const input = document.createElement('input');
document.body.appendChild(input);
input.setAttribute('value', '听说你想复制我');
input.select();
if (document.execCommand('copy')) {
document.execCommand('copy');
console.log('复制成功');
}
document.body.removeChild(input);
})const btn = document.querySelector('#btn');
btn.addEventListener('click',() => {
const input = document.createElement('input');
input.setAttribute('readonly', 'readonly');
input.setAttribute('value', 'hello world');
document.body.appendChild(input);
input.setSelectionRange(0, 9999);
if (document.execCommand('copy')) {
document.execCommand('copy');
console.log('复制成功');
}
document.body.removeChild(input);
})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)
