1、简单的纯JS复制粘贴(兼容性差,只能用textarea标签)

  var btn=document.getElementsByClassName("btn")[0];  //复制按钮
btn.onclick=function(){
var foo = document.getElementById("foo");  //要复制的节点,只能是textarea
foo.select();
document.execCommand("Copy");
}

2、ClipboardJS插件的使用

(一)简单的使用

<textarea id="foo">123</textarea>  //被复制对象
<button class="btn" data-clipboard-target="#foo" data-clipboard-action="copy">复制</button>  //复制 new ClipboardJS('.btn');

(二)高级的使用

  ClipboardJS.isSupported()  //是否兼容

  var clipboard = new ClipboardJS('.btn', {
target: function(trigger) {
return document.getElementById("foo")  //选择对象
}
}); var clipboard = new ClipboardJS('.btn', {
text: function(trigger) {
return 123567;  //复制内容
}
}) clipboard.on('success', function(e) {
console.info('Action:', e.action);  //复制类型
console.info('Text:', e.text);  //复制文本
console.info('Trigger:', e.trigger);  //复制节点
e.clearSelection();  //取消选择节点
});   clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});

  

ClipboardJS复制粘贴插件的使用的更多相关文章

  1. 复制粘贴插件(不包含 Flash)——clipboard.js

    clipboard.js是现代化的“复制到剪切板”插件.不包含 Flash.gzip 压缩后仅 3kb.不依赖 Flash 或其他臃肿的框架.API:https://clipboardjs.com c ...

  2. ZeroClipBoard 复制粘贴插件

    ZeroClipboard 1.    引用js 1 <script type="text/javascript" src="/ZeroClipboard.js&q ...

  3. 移动端复制粘贴clipboardjs

    官方网址: https://clipboardjs.com/ 不能一打开就直接触发复制粘贴: 参考博客: http://blog.csdn.net/twoByte/article/details/52 ...

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

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

  5. C# WinForm:DataTable中数据复制粘贴操作的实现

    1. 需要实现类似于Excel的功能,就是在任意位置选中鼠标起点和终点所连对角线所在的矩形,进行复制粘贴. 2. 要实现这个功能,首先需要获取鼠标起点和终点点击的位置. 3. 所以通过GridView ...

  6. pycharm无法使用ctrl+c/v复制粘贴的问题

    最近在使用pycharm的时候发现不能正常使用ctrl+c/v进行复制粘贴,也无法使用tab键对大段代码进行整体缩进.后来发现是因为安装了vim插件的问题,在setting里找到vim插件,取消勾选即 ...

  7. js 复制粘贴功能记录

    最近工作中需要在前端页面中使用代码完成剪贴板的读写,网上搜索了下相应的资料,记录下... 这个功能有两个办法一个是js方式,一个是使用flash 一.JS方法 1.复制 首先复制的过程分为两步曲,无论 ...

  8. 让微信内置浏览器兼容clipboard.js 复制粘贴 ios 安卓

    <!--js copy事件--><script type="text/javascript" src="/static/js/clipboard.min ...

  9. Ckeditor 4 复制粘贴截图并转化base64格式保存至数据库

    虽然Ckeditor 中自带的有上传图片和文件的功能,但是有时候我们并不需要把图片保存至服务器的文件夹中. 反而是截图复制粘贴,把图片转化为base64格式保存在数据库中即可满足要求. 1.首先下载安 ...

随机推荐

  1. 归档普通对象Demo示例程序源代码

    源代码下载链接:06-归档普通对象.zip34.2 KB // MJPerson.h // //  MJPerson.h //  06-归档普通对象 // //  Created by apple o ...

  2. bzoj 1026 DP,数位统计

    2013-11-20 08:11 原题传送门http://www.lydsy.com/JudgeOnline/problem.php?id=1026 首先我们用w[i,j]表示最高位是第i位,且是j的 ...

  3. poj 2406 Power Strings(kmp循环节)

    题目链接:http://poj.org/problem?id=2406 题目大意:如果n%(n-next[n])==0,则存在重复连续子串,长度为n-next[n]. 例如:      a    b  ...

  4. jetty bleed漏洞利用工具

    两个exp: https://github.com/AppSecConsulting/Pentest-Tools/blob/master/jetty-bleed.py https://github.c ...

  5. Django【进阶】FBV 和 CBV

    django中请求处理方式有2种:FBV 和 CBV 一.FBV FBV(function base views) 就是在视图里使用函数处理请求. 看代码: urls.py 1 2 3 4 5 6 7 ...

  6. selenium与360极速浏览器driver配置

    1)下载浏览器对应的driver,浏览器版本与driver对应关系,网址:http://www.cnblogs.com/JHblogs/p/7699951.html:driver下载地址:http:/ ...

  7. JS计算两个日期之间的天数

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 7.Redis键值对数据库

    1.Redis的安装以及客户端连接 安装:apt-get install redis-server 卸载:apt-get purge --auto-remove redis-server 启动:red ...

  9. <松本行弘的程序世界> 读书笔记

    第一章 编程语言不是从安全性的角度考虑以减少程序员犯错误,而是在程序员自己负责的前提下为他提供最大限度发挥能力的灵活性. 第二章 根据对象的不同类型而进行适当的处理,就是多态性的基本内容.根据数据类型 ...

  10. Nginx 的安装配置入门(mac)

    1.安装Nginx服务器: 执行命令 brew install nginx 安装完以后,可以在终端输出的信息里看到一些配置路径: /usr/local/etc/nginx/nginx.conf (配置 ...