js+html5实现复制文字按钮
程序员文章站
2023-02-24 09:08:29
本文实例为大家分享了js+html5实现点击复制文字的按钮，供大家参考，具体内容如下
图片展示：
注意css中的样式，有些页面复制不成功就是没有添加那一句造成的。...
本文实例为大家分享了js+html5实现点击复制文字的按钮，供大家参考，具体内容如下
图片展示：
注意css中的样式，有些页面复制不成功就是没有添加那一句造成的。
代码块
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<style type="text/css">
*{
-webkit-user-select: auto;
}
</style>
<body>
<span id="content">
你好，好久不见！
</span>
<button id="copybt">复制</button>
<script>
function copyarticle(event) {
const range = document.createrange();
range.selectnode(document.getelementbyid('content'));
const selection = window.getselection();
if(selection.rangecount > 0) selection.removeallranges();
selection.addrange(range);
document.execcommand('copy');
alert("复制成功！");
}
document.getelementbyid('copybt').addeventlistener('click', copyarticle, false);
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。