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端和移动端共同实现复制到剪贴板功能实现的更多相关文章

  1. 【原】js实现复制到剪贴板功能，兼容所有浏览器

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  2. 【转】js实现复制到剪贴板功能，兼容所有浏览器

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  3. 黄聪：JS实现复制到剪贴板功能，兼容所有浏览器（转）

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  4. 【转】js插件zClip实现复制到剪贴板功能

    相信这个功能大家平时上网经常能碰到,以前也没怎么留意怎么实现的,直到项目中需要. 网上一搜一大堆,单纯使用js方法也不是没有,但是由于各浏览器的安全机制不同,不是跨浏览器的.去看了几个常用的网站,都是 ...

  5. js插件zClip实现复制到剪贴板功能

    相信这个功能大家平时上网经常能碰到,以前也没怎么留意怎么实现的,直到项目中需要. 网上一搜一大堆,单纯使用js方法也不是没有,但是由于各浏览器的安全机制不同,不是跨浏览器的.去看了几个常用的网站,都是 ...

  6. 纯js实现复制到剪贴板功能

    在网页上复制文本到剪切板,一般是使用JS+Flash结合的方法,网上有很多相关文章介绍.随着 HTML5 技术的发展,Flash 已经在很多场合不适用了,甚至被屏蔽.本文介绍的一款JS插件,实现了纯J ...

  7. js/jQuery实现复制到剪贴板功能，兼容所有浏览器

    因为工作的原因,需要实现这样一个功能:点击按钮,复制文本内容. 百度了一下,大都语焉不详,最终找到了一篇很好的博文,有讲解,有实例,捣鼓了一会,最终实现了功能. 网址在这里http://www.cnb ...

  8. js实现复制到剪贴板功能，兼容所有浏览器

    http://www.cnblogs.com/PeunZhang/p/3324727.html https://github.com/zeroclipboard/ZeroClipboard 复制链接到 ...

  9. JS实现复制到剪贴板(兼容FF/Chrome/Safari所有浏览器)

    现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏 ...

随机推荐

  1. SpringBoot之多数据源动态切换数据源

    原文:https://www.jianshu.com/p/cac4759b2684 实现 1.建库建表 首先,我们在本地新建三个数据库名分别为master,slave1,slave2,我们的目前就是写 ...

  2. 容器自动化（一）：docker基础（上）

    一,Docker简介,功能特性与应用场景 1.1 Docker简介 Docker是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器上 ...

  3. 2星|项立刚《5G时代》：资料堆砌和一些假想设想，信息浓度太低

    “ 这是一本关于5G的书,但着眼点不是要说清楚5G的技术,因为解读5G技术的图书已经有很多,我自己也不是技术专家.本书是希望探讨在一个全新的网络体系下产业的发展与改变,以及5G对社会与经济的影响.P6 ...

  4. springboot中用来进行查看错误日志的logback文件

    <?xml version="1.0" encoding="UTF-8"?> <!-- 从高到地低 OFF . FATAL . ERROR . ...

  5. SCOI2018 树

    树 时间限制 3000ms 内存限制 64MB [题目描述] 在大小为 N 的树上,点从 1 到 N 标号,第 i 个点有权值 Ai,现在需要支持两种操作: 第一种操作格式为"1 U&quo ...

  6. test20181102 空间复杂度 和 test20181030 数独

    空间复杂度 考场做法 前有时间复杂度,后有空间复杂度. 但是这题不会有CE情况,所以较为好写. 就用map存复杂度,单层循环就搞定了. 至于判断维度的方法,我是用快读从字符串中读入. 然后不管常数,把 ...

  7. MLP多层感知机

    @author:wepon @blog:http://blog.csdn.net/u012162613/article/details/43221829 转载:http://blog.csdn.net ...

  8. java大文件上传解决方案

    最近遇见一个需要上传百兆大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现. 在某些业务中,大文件上传是一个比较重要的交互场景,如上传入库比较大的Excel表 ...

  9. 新路由3newifi3路由器刷机newifi3breed解锁小白刷机教程路由器刷breed老毛子Padavan固件

    路由刷机围观33696次5条评论日期:2018-11-23字体:大中小   此教程只针对新三路由器小白玩家,大神勿喷,非常详细. 先说一下,本人2018年11月22日新入手了个新三路由器,收到货晚上8 ...

  10. Unity与Android之间的交互之AndroidManifest

    https://blog.csdn.net/qq_15003505/article/details/70231975 AndroidManifest,中文名一般称之为清单文件.它描述了应用程序的组件的 ...