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

}

})