Js复制内容到剪贴板

复制内容到剪贴板的两个方法

1  第三方库：clipboard.js

这是官网 https://clipboardjs.com/

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>

 

<!-- Target -->

<input id="foo">

 

<!-- Trigger -->

注意到，在 <button> 标签中添加了一个 data-clipboard-target 属性，

它的值是需要复制的 <input> 的 id，顾名思义是从整个标签中复制内容

<button class="btn" data-clipboard-target="#foo">Copy to clipboard</button>

const btnCopy = 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);

});

2  原生方法：document.execCommand()

<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('复制成功');

}

})