JS：复制内容到剪贴板（无插件，兼容所有浏览器）

最新推荐文章于 2024-08-14 22:59:42 发布

zyqok

最新推荐文章于 2024-08-14 22:59:42 发布

阅读量4.1w

点赞数 46

分类专栏： HTML Jquery SpringMVC 文章标签： html javascript html5

本文链接：https://blog.csdn.net/sunnyzyq/article/details/85065022

版权

HTML 同时被 3 个专栏收录

28 篇文章 2 订阅

订阅专栏

Jquery

25 篇文章 0 订阅

订阅专栏

SpringMVC

2 篇文章 0 订阅

订阅专栏

HTML部分:

<button onclick="copyToClip('内容')"> Copy </button>

JS部分:

/**
 * 复制单行内容到粘贴板
 * content : 需要复制的内容
 * message : 复制完后的提示，不传则默认提示"复制成功"
 */
function copyToClip(content, message) {
    var aux = document.createElement("input"); 
    aux.setAttribute("value", content); 
    document.body.appendChild(aux); 
    aux.select();
    document.execCommand("copy"); 
    document.body.removeChild(aux);
    if (message == null) {
        alert("复制成功");
    } else{
        alert(message);
    }
}

【补充】

如果你想复制多行数据的话，可以采用如下方法。

/**
 * 复制多行内容到粘贴板
 * contentArray: 需要复制的内容（传一个字符串数组）
 * message : 复制完后的提示，不传则默认提示"复制成功"
 */
function copyToClip(contentArray, message) {
	var contents = "";
	for (var i = 0; i < contentArray.length; i++) {
		contents += contentArray[i] + "\n";
	}
	const textarea = document.createElement('textarea');
	textarea.value = contents;
	document.body.appendChild(textarea);
	textarea.select();
	if (document.execCommand('copy')) {
		document.execCommand('copy');
	}
	document.body.removeChild(textarea);
    if (message == null) {
        alert("复制成功");
    } else{
        alert(message);
    }
}