js实现浏览器复制功能
- 工作小总结
- 时间：2024-03-15 13:50
- 1791人已阅读
简介
有时候，我们需要用户点击后，直接复制到粘贴板上。js怎么实现？ function copy(str) { &
🔔🔔好消息!好消息!🔔🔔
有需要的朋友👉:微信号
有时候，我们需要用户点击后，直接复制到粘贴板上。js怎么实现？
function copy(str) {
var save = function(e) {
e.clipboardData.setData('text/plain', str);
e.preventDefault();
}
document.addEventListener('copy', save);
document.execCommand("copy");
}如果需要兼容：
js实现复制到剪切板
搜罗到两种兼容性还不错的方式。
1、第一种，通过clipboard.js插件实现（推荐）
此插件封装了很多种使用方式很方便，具体demo，可以去GitHub上看，clipboard传送门
2、第二种，纯js实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CopyDemo</title>
</head>
<body>
<div id=NewsToolBox></div>
<div id="text-content">
<p>测试p1</p>
<p>测试p2</p>
</div>
<button id="copy-text-btn">复制</button>
</body>
</html>
<script type="text/javascript">
// 复制全文
document.getElementById("copy-text-btn").onclick=function(){
var ssrsss =document.getElementById("text-content").innerText.replace(/\ +/g, ""); //获取文本并去掉空格
var flag = copyText(ssrsss); //传递文本
alert(flag ? '复制成功' : '复制失败')
};
function copyText(text) {
var textarea = document.createElement("textarea"); //创建input对象
var currentFocus = document.activeElement; //当前获得焦点的元素
var toolBoxwrap = document.getElementById('NewsToolBox'); //将文本框插入到NewsToolBox这个之后
toolBoxwrap.appendChild(textarea); //添加元素
textarea.value = text;
textarea.focus();
if (textarea.setSelectionRange) {
textarea.setSelectionRange(0, textarea.value.length); //获取光标起始位置到结束位置
} else {
textarea.select();
}
try {
var flag = document.execCommand("copy"); //执行复制
} catch (eo) {
var flag = false;
}
toolBoxwrap.removeChild(textarea); //删除元素
currentFocus.focus();
return flag;
}
</script>上面两种方式兼容性都不错，亲测可用。