###

之前用了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. Spring boot中使用Mongodb

    安装 使用Idea新建Spring boot工程时需要选择Mongodb 或者在工程中加入依赖 Maven: <dependency> <groupId>org.springf ...

  2. SpringBoot系列: 理解 Spring 的依赖注入(二)

    ==============================Spring 容器中 Bean 的名称==============================声明 bean 有两个方式, 一个是 @B ...

  3. Information Retrieval 倒排索引 学习笔记

    一,问题描述 在Shakespeare文集(有很多文档Document)中,寻找哪个文档包含了单词“Brutus”和"Caesar",且不包含"Calpurnia&quo ...

  4. Socket编程 (一)

    <<Linux 网络编程>>摘要 注意: 其中的大部分成员是网络字节序(大端字节序); 编程: 服务器先要做的事情: socket() 初始化Socket bind() 绑定本 ...

  5. idea 创建运行web项目时,报错: Can not issue executeUpdate() for SELECTs解决方案

    最近在做一个Web课程设计的时候遇到了如下的问题. java.sql.SQLException: java.lang.RuntimeException: java.sql.SQLException: ...

  6. Ubuntu18.04中安装cuda的记录

    一.参考: https://blog.csdn.net/QLULIBIN/article/details/78714596 https://www.jianshu.com/p/00c37b09f0f3 ...

  7. jdbc 日期处理问题

    1.从结果集中取得日期部分 resultSet.getDate();  --2013-01-07 2.从结果集中取得时间部分 resultSet.getTime()   --22:08:09 3.从结 ...

  8. PHPcms 缓存的读取和设置

    https://blog.csdn.net/huobobo124/article/details/76912632 1.PHPcms设置了保存和读取缓存的方法,其实现方法存储在PHPcms/lib/f ...

  9. Spark On Yarn报警告信息 WARN yarn.Client: Neither spark.yarn.jars nor spark.yarn.archive is set, falling back to uploading libraries under SPARK_HOME.

    1 贴出完整日志信息 // :: INFO client.RMProxy: Connecting to ResourceManager at hdp1/ // :: INFO yarn.Client: ...

  10. DEA和模糊综合评价

    DEA(包络分析) 1.概念 利用多项投入指标和产出指标,利用线性规划的方法,对具有可比性的同类型单位进行有效性评价的一种数量分析方法.以效率的概念作为加总模式,效率等于总产出除以总投入,并以效率最大 ...