JS pc端和移动端共同实现复制到剪贴板功能实现

Posted maqingyuan

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS pc端和移动端共同实现复制到剪贴板功能实现相关的知识，希望对你有一定的参考价值。

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

以上是关于JS pc端和移动端共同实现复制到剪贴板功能实现的主要内容，如果未能解决你的问题，请参考以下文章

移动端实现复制到剪贴板

Html+Css+js实现春节倒计时效果（移动端和PC端）

js实现拖拽兼容pc端和手机端

js实现一个可以兼容PC端和移动端的div拖动效果

PC端和移动端都支持视频video自动播放的代码

PC端和移动端都支持视频video自动播放的代码