当前位置：首页 > JavaScript

js 实现ctrl c

2026-04-07 16:11:27JavaScript

监听键盘事件实现复制功能

通过document.addEventListener监听键盘按键事件，检测Ctrl+C组合键。当组合键触发时，执行复制操作。

document.addEventListener('keydown', function(event) {
    if (event.ctrlKey && event.key === 'c') {
        const selection = window.getSelection();
        if (selection.toString().length > 0) {
            navigator.clipboard.writeText(selection.toString())
                .then(() => console.log('复制成功'))
                .catch(err => console.error('复制失败:', err));
        }
    }
});

使用Clipboard API直接复制文本

Clipboard API提供writeText方法，可以直接将指定文本写入剪贴板。

function copyToClipboard(text) {
    navigator.clipboard.writeText(text)
        .then(() => alert('文本已复制'))
        .catch(err => console.error('复制失败:', err));
}

兼容旧浏览器的实现方案

对于不支持Clipboard API的浏览器，可以使用document.execCommand方法作为降级方案。

function legacyCopy(text) {
    const textarea = document.createElement('textarea');
    textarea.value = text;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand('copy');
    document.body.removeChild(textarea);
    alert('已复制到剪贴板');
}

自定义按钮触发复制

在页面中添加按钮元素，通过点击事件触发复制操作。

<button id="copyBtn">复制文本</button>
<script>
    document.getElementById('copyBtn').addEventListener('click', () => {
        copyToClipboard('要复制的文本内容');
    });
</script>

处理复制权限问题

现代浏览器要求复制操作必须由用户手势触发，否则会拒绝权限。确保复制函数在用户交互事件中调用。

js 实现ctrl c

document.querySelector('.copy-btn').addEventListener('click', async () => {
    try {
        await navigator.clipboard.writeText('安全复制的文本');
        console.log('复制成功');
    } catch (err) {
        console.error('复制被拒绝:', err);
    }
});