html:
<div id="txt">我是要复制的内容</button>
<button id="copyBtn">点击复制</button>

js:
clipboard.min.js

三种复方式: 
  1.指定复制目标taget
    data-clipboard-target指向复印节点,这里指input的目标id;
    data-clipboard-action 值为copy(默认)或cut。注意:cut只能在input和textare中起作用;
    exp:<button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">点击复制</button>
  2.通过function返回 
    1)通过target的function
        exp:
var clipboard = new Clipboard('#copyBtn', {
target: function() {
return document.querySelector('#txt');
}
});
    2)通过text的function
var txt = document.getElementById("txt").innerHTML;
    var clipboard = new Clipboard('#copyBtn', {
     text: function() {
     return txt;
     }
    });

  3.通过data-clipboard-text属性返回 //简单易操作,更适用于多个复制按钮
  exp:  <button data-clipboard-text="1">点击复制</button>
var btn = document.getElementById('copyBtn');
var clipboard = new Clipboard(btn);
 
//共用代码块
clipboard.on('success',
function(e) {
console.log("复制成功");
});
clipboard.on('error',
function(e) {
  console.log("复制失败");
        });

首先声明本人资质尚浅,本文只用于个人总结。如有错误,欢迎指正、共同提高。

欢迎转载,转载请注明:转载自[ http://www.cnblogs.com/juneling ]

js实现复制 、剪切功能-clipboard.min.js 示例的更多相关文章

  1. 复制粘贴之插件(clipboard.min.js)不需要安装flash

    <!DOCTYPE html> <html> <head> <title>ZeroClipboard Test</title> <me ...

  2. jq复制到剪切板插件clipboard.min.js(兼容IE9)

    /*! * clipboard.js v1.5.5 * https://zenorocha.github.io/clipboard.js * * Licensed MIT 漏 Zeno Rocha * ...

  3. clipboard.min.js 复制表格内容

    <script type="text/javascript" src="js/clipboard.min.js"></script> & ...

  4. js 实现复制剪切

    原生js实现复制 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  5. JS 操作复制剪切粘贴

    测试了很多次之后,虽然有点细碎的突破,但还是想说,麻辣隔壁... 众所周知使用 oncut/oncopy/onpaste 监听剪切板,采用 window.clipboardData 并不是适用于大多浏 ...

  6. Linux下vi编辑器粘贴复制剪切功能

    RedHat 9.0 Linux下vi编辑器实现简单的粘贴复制剪切功能": 如果想把文件内的第三行内容黏贴到第十五行: 1.进入你的文件,(处于命令模式,而不是编辑模式) 2.将你的光标移到 ...

  7. js实现复制|剪切指定内容到粘贴板--clipboard

    这是著名开源项目 clipboard.js 的 README.md,里面讲解的更加详细,有兴趣的同学可以了解一下.项目地址:https://github.com/zenorocha/clipboard ...

  8. 通过如何通过js实现复制粘贴功能

    在ie中window.clipboardData(剪切板对象)是可以被获取,所以利用这个方法我们可以实现在IE当中复制粘贴的功能,demo如下! <html> <head> & ...

  9. js实现复制粘贴功能

    在项目中使用到复制粘贴功能,虽然网上有很多大牛封装了很多的插件,但是还是想不去使用插件,就像自己来实现这个功能. 另一篇是禁止复制粘贴 前端er怎样操作剪切复制以及禁止复制+破解等 初步想法: 1. ...

随机推荐

  1. MIGO 收货

    ls_code-gm_code = '01'. 01 - MB01 - Goods Receipts for Purchase Order 02 - MB31 - Goods Receipts for ...

  2. Spring Boot连接MySQL报错“Internal Server Error”的解决办法

    报错信息如下: {timestamp: "2018-06-14T03:48:23.436+0000", status: 500, error: "Internal Ser ...

  3. Flutter 页面下拉刷新和上拉加载

    flutter_easyrefresh 正如名字一样,EasyRefresh很容易就能在Flutter应用上实现下拉刷新以及上拉加载操作,它支持几乎所有的Flutter控件.它的功能与Android的 ...

  4. IDEA配置Hystrix过程中报错: java.lang.IllegalStateException: No instances available for user-service

    最近在练习微服务架构中, 使用IDEA配置完Hystrix, 添加熔断方法后, 在浏览器中访问未启动的( 含有熔断方法注解 )的路径时, 报出了 : 500: No instances availab ...

  5. IDEA配置SpringBoot应用的profile启动参数

    参考博客:https://blog.csdn.net/li396864285/article/details/83576829 如图为, 配置多台eureka的启动参数, 分别为: --spring. ...

  6. 日志.VC

    1. int WriteLog(char* _pcFullFileName, char* _pcWrite, int _iWriteLen, unsigned long * _pdwWritten) ...

  7. 最新 昆仑万维java校招面经 (含整理过的面试题大全)

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.昆仑万维等10家互联网公司的校招Offer,因为某些自身原因最终选择了昆仑万维.6.7月主要是做系统复习.项目复盘.Leet ...

  8. CentOS7.0 测试环境准备过程

    1. 公司最近开始走向国产化和开源路线,因为绝大多数国产化都是采取的linux路线, 所以为了保证兼容性, 测试环境大部分从windows迁移到了linux环境. 测试采取逐步推进的模式, 先测试兼容 ...

  9. 飞腾PC机器与奔腾G645的PC机器以及E5-2630V4虚拟机内存性能简单对比

    1. 对比工具 sysbench 2. 对比命令 sysbench --test=memory --memory-total-size=12G --num-threads= run 3 安装方式 #u ...

  10. C# DataTable映射成Entity

    using System; using System.Collections.Generic; using System.ComponentModel.DataAnnotations.Schema; ...