原生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>
