Javascript 实现复制功能

2018-08-18

在 Javascript 中使用 document.execCommand 方法可以将目标文字复制到剪切板中。

复制输入域的数据
其他 element 复制

复制输入域的数据

<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 中，再次进行上面的步骤即可。

<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>

试一试

JavaScript复制内容到剪贴板