当前位置:首页-文章-HTML/CSS/JS代码记录-正文

原生JavaScript实现点击复制功能

最近遇到一个需求,需要对pre标签的文本实现复制到剪切板功能,网上解决方案,大多存在兼容性问题,对某些浏览器的支持不够友好,最终搞出了一套兼容性比较好的复制功能代码。

一、原理分析

浏览器提供了 copy 命令 ,可以复制选中的内容。

document.execCommand("copy");

但是此命令对IE浏览器、华为浏览器、火狐浏览器的支持不够友好,测试在Google、360等浏览器可以正常使用,所以对这些浏览器进行了兼容处理。

二、核心JavaScript代码

将获取到的值传入 copyToClipboard( ) 函数即可实现复制。

// js 复制到剪贴板
function copyToClipboard(content) {
    // For IE
    if (window.clipboardData) {
	    window.clipboardData.clearData();
	    window.clipboardData.setData('text', content);
    }
    // For Firefox, Google Chrome, Opera, Safari, 360
    else if (document.execCommand) {
	    var element = document.createElement('SPAN');
	    element.textContent = content;
	    document.body.appendChild(element);
	    if (document.selection) {
		    var range = document.body.createTextRange();
		    range.moveToElementText(element);
		    range.select();
	    } else if (window.getSelection) {
		    var range = document.createRange();
		    range.selectNode(element);
		    window.getSelection().removeAllRanges();
		    window.getSelection().addRange(range);
	    }
	    document.execCommand('copy');
	    element.remove ? element.remove() : element.removeNode(true);
    }
}

三、实现Demo

这里实现了复制pre标签的内容,想要复制其他标签的内容将Demo里第48行改成需要添加复制按钮的标签即可。

<!DOCTYPE html>
<head>
    <!--简体中文-->
    <meta http-equiv="content-type" content="text/css;charset=gb2312">
    <title>点击复制Demo</title>
    <style>
    pre{
        background-color: #f5f5f5;
        padding: 5px;
        width:500px;
        height:auto;
        max-height: 300px;
        margin-left: auto;
        margin-right: auto;
        border: 1px solid #0000FF; 
        line-height: 20px;
        font-size:12px;
        white-space: pre-wrap;
        word-wrap: break-word;
    }
    button{
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -khtml-user-select: none;
         float:left; 
        border-radius: 4px;
        position:absolute;
        right:10px;
        top:5px;
        user-select: none;
        width: 65px;
        height: 20px;
        font-size: 12px;
        line-height: 1;
        background:rgb(192,192,192);
        cursor: pointer;
        color: white;
        transition: color .1s;
    }
</style>
</head>

<html>
<body>
<div id="demo"><pre id="demo-pre">复制此内容</pre></div>
<script>
function copypre(){
[...document.getElementsByTagName("pre")].forEach(item => {
        item.style.position = "relative";
        let copyButton = document.createElement("button")
        copyButton.innerHTML = "复制";
        copyButton.onclick = function () {
            copyButton.innerHTML = "";
            let copyData = item.innerText;
            copyToClipboard(copyData)
            copyButton.innerHTML = "复制成功";
            setTimeout(function() {
                copyButton.innerHTML = "复制";
            }, 1000);
        }
        item.appendChild(copyButton)
});}
// js 复制到剪贴板
function copyToClipboard(content) {
    // for ie
    if (window.clipboardData) {
	    window.clipboardData.clearData();
	    window.clipboardData.setData('text', content);
    }
    // for modern browser
    else if (document.execCommand) {
	    var element = document.createElement('SPAN');
	    element.textContent = content;
	    document.body.appendChild(element);
	    if (document.selection) {
		    var range = document.body.createTextRange();
		    range.moveToElementText(element);
		    range.select();
	    } else if (window.getSelection) {
		    var range = document.createRange();
		    range.selectNode(element);
		    window.getSelection().removeAllRanges();
		    window.getSelection().addRange(range);
	    }
	    document.execCommand('copy');
	    element.remove ? element.remove() : element.removeNode(true);
    }
}
copypre();
</script>
</body>
</html>

本文原创,作者:鸭鸭吖,其版权均为技术园所有。
如需转载,请注明出处:https://iox7.com/15.html