Clipboard API一行代码实现复制效果

2022-01-077789次阅读javascript

剪贴板 Clipboard API 为 Navigator 接口添加了只读属性 clipboard,该属性返回一个可以读写剪切板内容的 Clipboard 对象。 在 Web 应用中,剪切板 API 可用于实现剪切、复制、粘贴的功能。

<button id="button">点击按钮复制</button>
button.addEventListener('click', function () {
    var text = '被复制的内容,啦啦啦~';
    if (navigator.clipboard) {
        // clipboard api 复制
        navigator.clipboard.writeText(text);
    } else {
        var textarea = document.createElement('textarea');
        document.body.appendChild(textarea);
        // 隐藏此输入框
        textarea.style.position = 'fixed';
        textarea.style.clip = 'rect(0 0 0 0)';
        textarea.style.top = '10px';
        // 赋值
        textarea.value = text;
        // 选中
        textarea.select();
        // 复制
        document.execCommand('copy', true);
        // 移除输入框
        document.body.removeChild(textarea);
    }
});

 

上一篇: event.currentTarget和event.target的区别  下一篇: css两端淡出中间实色的分隔线  

Clipboard API一行代码实现复制效果相关文章