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. CSS之选择器相关

    一.选择器的作用 选择器就是用来选择标签的,要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器. HTML页面中的元素就是通过CSS选择器进行控制的.每一条 ...

  2. shell 文本替换 ---出现--- sed:-e 表达式 #1,字符 8:“s”的未知选项

    需要替换的行为: monitor.url=http://192.168.25.100:8443/rest 查询资料得知,报错是因为替换的字符串包含有分隔符/ 所以这行改一下分隔符就可以解决问题了  ( ...

  3. 常见错误 RuntimeError: expected type torch.FloatTensor but got torch.cuda.FloatTensor

    https://www.jianshu.com/p/0be7a375bdbe https://blog.csdn.net/qq_38410428/article/details/82973895 计算 ...

  4. 从Retrofit的源码来看 HTTP

    关于Retrofit是啥,这里就不多解释了,还是先来瞅下官网: 而这次主要是了解它的底层动作机制,而在了解底层之前先来回顾一下官网的整体使用步骤: 咱们也以官网的这个例子为例,先从简单的使用开始逐步深 ...

  5. django实现发送邮件功能

    django实现邮件发送功能 1)首先注册一个邮箱,这里以163邮箱为例 2)注册之后登录,进行如下修改 找到设置,设置一个授权码,授权码的目的仅仅是让你有权限发邮件,但是不能登录到邮箱进行修改,发送 ...

  6. jquery基础知识3

    1.jquery的位置信息 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  7. P2085 最小函数值[优先队列]

    题目描述 有n个函数,分别为F1,F2,...,Fn.定义Fi(x)=Ai*x^2+Bi*x+Ci (x∈N*).给定这些Ai.Bi和Ci,请求出所有函数的所有函数值中最小的m个(如有重复的要输出多个 ...

  8. vue中读取excel中数据

    安装xlsx npm install xlsx --save-dev 安装好后在需要的页面 引入插件 import xlsx from 'xlsx' 调用 $('#uploadFile').chang ...

  9. nextjs —— jsx style 学习记录

    作用域 全局 <style global jsx>{` .hero { width: 100%; color: #333; } .title { margin: 0; width: 100 ...

  10. Java锁--CyclicBarrier

    转载请注明出处:http://www.cnblogs.com/skywang12345/p/3533995.html CyclicBarrier简介 CyclicBarrier是一个同步辅助类,允许一 ...