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. uoj198【CTSC2016】时空旅行

    传送门:http://uoj.ac/problem/198 [题解] 首先y.z是没有用的.. 然后式子就是w = (x0-xi)^2+ci的最小值,化出来可以变成一个直线的形式. 然后我们可以用线段 ...

  2. [bzoj3597][scoi2014]方伯伯运椰子——分数规划,负环

    题解 目标就是 \[Maximize\ \lambda = \frac{X-Y}{k}\] 按照分数规划的一般规律, 构造: \[g(\lambda) = \lambda k + Y - X\] 由于 ...

  3. [vue-router] Failed to resolve async component default: Error: Loading chunk 0 failed.

    在整合laravel5.4 和vue2.1的时候遇到一个奇怪的问题 Uncaught SyntaxError: Unexpected token < Error: Loading chunk 0 ...

  4. PHP性能追踪及分析工具xhprof的安装与使用

    对于本地开发环境来说,进行性能分析xdebug是够用了,但如果是线上环境的话,xdebug消耗较大,配置也不够灵活,因此线上环境建议使用xhprof进行PHP性能追踪及分析. 我们今天就简单介绍一下x ...

  5. python之八大排序方法

    一.插入排序 #-*- coding:utf-8 -*- ''' 描述 插入排序的基本操作就是将一个数据插入到已经排好序的有序数据中,从而得到一个新的.个数加一的有序数据,算法适用于少量数据的排序,时 ...

  6. webupload在IE9-出现的问题解决

    1,点击选择按钮无反应 原因:IE9调用的是flash上传,Upload.swf路径错误!!导致 解决:检查Upload.swf路径是否准确!!!!直接改成cdn地址,是最直接有效的办法. 2,IE9 ...

  7. 读取pandas修改单列数据类型

    import pandas as pd import numpy as np df = pd.read_csv('000917.csv',encoding='gbk') df = df[df['涨跌幅 ...

  8. 轻量级批量管理工具pssh

    pssh工具 pssh工具是个轻量级的批量管理工具,相比同类型的开源工具 Ansible,Saltstack,他比较轻量级,需要对管理的主机做秘钥认证 Ansible是可以做秘钥认证,也可以通过配置文 ...

  9. debian 更换sh的默认链接为bash

    https://blog.csdn.net/mudongliangabcd/article/details/43458895

  10. php获取rl完整地址

    /** * 获取url完整地址 * @author 梁景 * @date 2017-04-27 * @return */ function getUrlInfor() { $sys_protocal ...