复制内容到剪贴板

作者:周伯通来源:lanyunwork时间:2018.03.26

复制内容到剪贴板,我感觉并不是一个常用的功能,但在某些时候,还是需要的,在个人第一次使用的时候,发现其兼容性比较差,大部分就只兼容ie浏览器,不然就是借助第三方库:clipboard。

这里,我有查询到一种方法,不需要借助第三方库,可复制内容到剪贴板,然后粘贴到其他地方。

复制函数:

function copyArticle(event){
        const range = document.createRange();
        range.selectNode(document.getElementById('txt'));

        const selection = window.getSelection();
        if(selection.rangeCount > 0) selection.removeAllRanges();
        selection.addRange(range);
        
        document.execCommand('copy');
	alert("复制成功");
}

调用语句:

document.getElementById('copy').addEventListener('click', copyArticle, false);

测试demo:

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Copy Demo</title>
</head>
<body>
<span id="article">
    测试复制内容到剪贴板
</span>
<textarea style="width: 500px;height: 100px;" placeholder="试一试ctrl + v"></textarea>
<br>
<button  id="copy">复制文章</button>
<script>
    function copyArticle(event){
        const range = document.createRange();
        range.selectNode(document.getElementById('article'));

        const selection = window.getSelection();
        if(selection.rangeCount > 0) selection.removeAllRanges();
        selection.addRange(range);
        
        document.execCommand('copy');
		alert("复制成功")
    }

    document.getElementById('copy').addEventListener('click', copyArticle, false);
</script>
</body>
</html>

 

可将demo代码复制到html文件,查看效果;