在 Javascript 中使用 document.execCommand 方法可以将目标文字复制到剪切板中。
复制输入域的数据
1
2
3
4
5
6
7
8
9
10
11
12
13
| <input id="demoInput" value="hello world">
<button id="btn">点我复制</button><br/>
<script>
const btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
const input = document.querySelector('#demoInput');
input.select();
if (document.execCommand('copy')) {
document.execCommand('copy');
console.log('复制成功');
}
})
</script>
|
试一试
其他 element 复制
document.execCommand 只能复制输入域的内容，如 input textarea，而其他的 element 内容复制，只能通过借用 input 的方式来完成。
将想要复制的内容添加到一个隐藏的 input 中，再次进行上面的步骤即可。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <div id="div" style="border-style: solid;">这次是 div 的内容</div>
<button id="btn1">点我复制</button>
<script>
const btn1 = document.querySelector('#btn1');
btn1.addEventListener('click', () => {
const input = document.createElement('input');
const div = document.querySelector('#div');
input.setAttribute('readonly', 'readonly');
input.setAttribute('value', `${div.innerHTML}`);
document.body.appendChild(input);
input.select();
// input.setSelectionRange(0, input.value.length);
if (document.execCommand('copy')) {
document.execCommand('copy');
console.log('复制成功');
}
document.body.removeChild(input);
})
</script>
|
试一试