JS pc端和移动端实现复制到剪贴板功能实现
在网页上复制文本到剪切板，一般是使用JS+Flash结合的方法，网上有很多相关文章介绍。随着 HTML5 技术的发展，Flash 已经在很多场合不适用了，甚至被屏蔽。本文介绍的一款JS插件，实现了纯JS方法复制文本到剪切板。
插件名是Clipboard.js，该插件不依赖 Flash，而是依赖于最新HTML5推出 Selection API 和 execCommand API。
Github：
https://github.com/zenorocha/clipboard.js
可以通过npm方式安装：
npm install clipboard --save
首先需要在页面引入：
<script src="dist/clipboard.min.js"></script>
下面直接上HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>复制功能实现</title>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<Meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no,maximum-scale=1.0, minimum-scale=1.0">
<script src ="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
</head>
<body>
<input class="foo" value="这里是内容">
<span class="fdd">阿斯顿发斯蒂芬阿斯蒂芬</span>
<button class="btn" data-clipboard-target=".foo">点击复制</button>
<button class="btn" data-clipboard-target=".fdd">点击复制</button>
<script src ="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script>
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
alert("复制成功!");
e.clearSelection();
});
clipboard.on('error', function(e) {
alert("复制失败!");
});
</script>
</body>
</html>
参考地址:
https://www.cnblogs.com/52fhy/p/5383813.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
