原生js实现复制内容到剪切板,兼容pc、移动端(支持Safari浏览器)
在开发中经常会遇到这样的需求,第一种就是点击复制当前页面的链接,第二种就是类似卡券的功能,需要复制密码等等。
在网上看到有很多该功能的实现代码,除了插件clipboard.js、ZeroClipboar兼容性较好以外,其他大部分在safari,ios上的微信端这些并不兼容。那么在不使用插件的情况下,为大家整理了一份较为兼容的实现方式:纯js实现复制文本并提示复制成功(干货)适用所有浏览器,直接放项目就能用。
代码如下:
<a onclick="copyTxt('这是要复制的内容哦')">点击复制</a>
js:
<script>
//原生js实现复制内容到剪切板,兼容pc、移动端(支持Safari浏览器)
function copyTxt(text){
if(typeof document.execCommand!=="function"){
alert("复制失败,请长按复制");
return;
}
var dom = document.createElement("textarea");
dom.value = text;
dom.setAttribute('style', 'display: block;width: 1px;height: 1px;');
document.body.appendChild(dom);
dom.select();
var result = document.execCommand('copy');
document.body.removeChild(dom);
if (result) {
alert("复制成功");
return;
}
if(typeof document.createRange!=="function"){
alert("复制失败,请长按复制");
return;
}
var range = document.createRange();
var div=document.createElement('div');
div.innerHTML=text;
div.setAttribute('style', 'height: 1px;fontSize: 1px;overflow: hidden;');
document.body.appendChild(div);
range.selectNode(div);
const selection = window.getSelection();
if (selection.rangeCount > 0){
selection.removeAllRanges();
}
selection.addRange(range);
document.execCommand('copy');
alert("复制成功")
}
</script>
扫描公众号,关注更多信息
---------------------------------------------------------------------------------我是分割线--------------------------------------------------------------------------to be a better me, talk is cheap show me the code
版权所有,转载请注明原文链接。
文中有不妥或者错误的地方还望指出,以免误人子弟。如果觉得本文对你有所帮助不妨【推荐】一下!如果你有更好的建议,可以给我留言讨论,共同进步!
再次感谢您耐心的读完本篇文章。
----------------------------------------------------------------------------------------------------------------------------------------------------------------------