###

之前用了js自带的剪贴板对象clipboardData 对象以为就可以实现粘贴复制，但是种只支持IE的。

就找了jq的一个插件Zclip，但是网上的说法是利用了flesh来实现的，我用了之后可以实现，但是面对我自啊table的td中存在多个要实现粘贴复制的话，就会有问题了。

所以，才找了现在这个jqery的另一个插件，相对更好些，能够支持移动端的

###

插件官网：https://clipboardjs.com/

实现起来也很简单，

我就弄个例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>target-input</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

    <!-- 1. Define some markup -->

    <input id="foo" type="text" value="hello">

    <button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>

    <!-- 2. Include library -->

    <script src="../dist/clipboard.min.js"></script>

    <!-- 3. Instantiate clipboard -->

    <script>

    var clipboard = new Clipboard('.btn');

    clipboard.on('success', function(e) {

        console.log(e);

    });

    clipboard.on('error', function(e) {

        console.log(e);

    });

    </script>

</body>

</html>

JQery插件clipboard.js ----将文本复制到剪贴板的现代化方法的更多相关文章

  1. JS实现文本复制与剪切

    我们在网页上放置一个复制按钮,主要用来方便用户复制链接之类的复杂文本,以往的做法是,通过JS依靠Flash,甚至借助jQuery庞大的js库来实现文本复制到剪贴板的.今天我要给大家介绍的是一款极现代的 ...

  2. js 将内容复制到剪贴板

      js 将内容复制到剪贴板 CreationTime--2018年7月1日15点06分 Author:Marydon function copyToClipboard(txt) { if(windo ...

  3. clipboard.js -- js实现将文本复制到剪贴板的方法

    资源 推荐使用:clipboard.js 官方教程地址:https://clipboardjs.com/#example-text 官方github地址:https://github.com/zeno ...

  4. ZeroClipboard 插件实现文本复制到剪贴板

    ZeroClipboard 的官网 点这里,github地址 点这里. 事例如下: 在引入 ZeroClipboard.js 之后, <button id="clip_button&q ...

  5. js将内容复制到剪贴板

    有一需求,点击按钮要将某个值复制到剪贴板. 第一种,代码如下: <div cols="20" id="biao1">12345678</div ...

  6. 一款给力的一键复制js插件-clipboard.js

    一款没有依赖的.给力的一键复制的JS插件   点我前往github 案例demo见下载包内demo文件夹. 这里晒出最常用的几种方式,以供不时之需. <!DOCTYPE html> < ...

  7. vue中使用剪切板插件 clipboard.js

    vue中使用剪切板需要借助一个插件,clipboard,使用方法还是很简单的,先下载,然后引入: npm i clipboard -S //引入 import Clipboard from 'clip ...

  8. 怎样使用js将文本复制到系统粘贴板中

    需要使用到三个document方法: 1. document.execCommand(); 执行某个命令 2. document.queryCommandSupported(); 检测浏览器是否支持某 ...

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

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

随机推荐

  1. 042、用volume container 共享数据 （2019-03-05 周二）

    参考https://www.cnblogs.com/CloudMan6/p/7188479.html   volume container 是专门为其他容器提供 volume 的容器,他提供的卷也可以 ...

  2. 在py文件中设置文件头

    在写python文件的时候有时需要记录作者.创建时间等时间,因此可以给python文件设置文件头,这里以PyCharm为例介绍设置步骤: 1. 打开PyCharm,依次点击Setting-----Ed ...

  3. 一个强大的VS代码搜索工具

    最近一直在寻找一款VS代码搜索插件,终于找到了一个不错的,仅支持vs2012以上. https://marketplace.visualstudio.com/items?itemName=mario- ...

  4. bus实现兄弟组件传值

    传递的地方:两个组件都要引入这个公共的bus中转函数 Bus.js文件相当于一个公共的对象: 传递的文件中写入这个方法: 兄弟组件通过点击事件输出参数,需要的组件来接收传递过来的参数:

  5. Web Of Science

  6. Git学习之忽略特殊文件.gitignore的配置

    1.Mac中使用Git上传项目代码时忽略.DS_Store文件 简单的说Mac每个目录都会有个文件叫.DS_Store,它是用于存储当前文件夹的一些Meta信息.所以每次查看Git目录的状态,如果没有 ...

  7. JS中原型链中的prototype与_proto_的个人理解与详细总结

    1.对象的内部属性[[prototype]]和属性__proto__:每个对象都具有一个名为__proto__的属性: 2.函数的属性prototype:每个构造函数(构造函数标准为大写开头,如Fun ...

  8. 【转载】java abstract class和interface的区别

    转载:https://blog.csdn.net/b271737818/article/details/3950245 在Java语言中,abstract class和interface是支持抽象类定 ...

  9. Spring boot+Thymeleaf+easyui集成：js创建组件页面报错

    开发工具:Ideal 使用场景:Demo 前提:       环境:Spring boot +Thymeleaf+easyui 引入thymeleaf模板引擎 <html lang=" ...

  10. Django中的信号基础知识

    Django中提供了“信号调度”,用于在框架执行操作时解耦.通俗来讲,就是一些动作发生的时候,信号允许特定的发送者去提醒一些接受者. 1.Django内置信号 1 2 3 4 5 6 7 8 9 10 ...