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. 【LA3487】最小割-经典模型 两种方法

    题目链接 题意:A.B两个公司要买一些资源(他们自己买的资源不会重复),一个资源只能卖给一个公司.问最大收益. simple input 部分: 54 1 //买到1就给54元 15 2 33 3 2 ...

  2. bzoj1577 [Usaco2009 Feb]庙会捷运Fair Shuttle

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1577 [题解] 我们把每坨奶牛按s排个序. 对于每坨奶牛,如果车上有空位置就塞. 否则,看下 ...

  3. DotNETCore 学习笔记 异常处理

    Error Handling public void Configure(IApplicationBuilder app, IHostingEnvironment env) { app.UseIISP ...

  4. bzoj 1251 裸splay

    裸的splay,只需要注意 max[-1]:=-maxlongint 就行了,否则在update的时候子节点的 max值会在max[-1]里选 /*************************** ...

  5. 常见协议基础知识总结--FTP协议

    FTP协议是一种基于客户端和服务器的文件传输协议,属于应用层协议,基于传输层的TCP协议: FTP主要分成主动模式和被动模式两种传输方式, 方式是相对服务器而言的,服务器主动发起数据连接即主动方式,使 ...

  6. HTTP===返回结果的HTTP状态码

    HTTP 状态码负责表示客户端 HTTP 请求的返回结果.标记服务器端的处理是否正常.通知出现的错误等工作. 1.状态码告知从服务器端返回的请求结果 状态码的职责是当客户端向服务器端发送请求时,描述返 ...

  7. 使用maven构建第一个web项目

    在eclipse中,正常创建maven项目后,发现在index.jsp中会报错,此时在pom.xml中加入如下依赖关系即可 <dependency> <groupId>java ...

  8. WPF拖放功能实现

    写在前面:本文为即兴而作,因此难免有疏漏和词不达意的地方.在这里,非常期望您提供评论,分享您的想法和建议. 这是一篇介绍如何在WPF中实现拖放功能的短文. 首先要读者清楚的一件事情是:拖放主要分为拖放 ...

  9. C#获取屏幕大小或任务栏大小

    C#获取屏幕大小或任务栏大小http://www.cnblogs.com/chlyzone/archive/2012/11/05/2754601.html

  10. shipyard, swarm看到你,我才睡觉:)

    windows下用boot2docker有点不爽,就是网卡识别不好. 还是用纯的virtualbox建centos7虚拟机来搞, 一下就OK. 但记得,要用Iptables来弄墙,去掉firewall ...