js实现复制 、剪切功能-clipboard.min.js 示例
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 示例的更多相关文章
- 复制粘贴之插件(clipboard.min.js)不需要安装flash
<!DOCTYPE html> <html> <head> <title>ZeroClipboard Test</title> <me ...
- jq复制到剪切板插件clipboard.min.js(兼容IE9)
/*! * clipboard.js v1.5.5 * https://zenorocha.github.io/clipboard.js * * Licensed MIT 漏 Zeno Rocha * ...
- clipboard.min.js 复制表格内容
<script type="text/javascript" src="js/clipboard.min.js"></script> & ...
- js 实现复制剪切
原生js实现复制 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- JS 操作复制剪切粘贴
测试了很多次之后,虽然有点细碎的突破,但还是想说,麻辣隔壁... 众所周知使用 oncut/oncopy/onpaste 监听剪切板,采用 window.clipboardData 并不是适用于大多浏 ...
- Linux下vi编辑器粘贴复制剪切功能
RedHat 9.0 Linux下vi编辑器实现简单的粘贴复制剪切功能": 如果想把文件内的第三行内容黏贴到第十五行: 1.进入你的文件,(处于命令模式,而不是编辑模式) 2.将你的光标移到 ...
- js实现复制|剪切指定内容到粘贴板--clipboard
这是著名开源项目 clipboard.js 的 README.md,里面讲解的更加详细,有兴趣的同学可以了解一下.项目地址:https://github.com/zenorocha/clipboard ...
- 通过如何通过js实现复制粘贴功能
在ie中window.clipboardData(剪切板对象)是可以被获取,所以利用这个方法我们可以实现在IE当中复制粘贴的功能,demo如下! <html> <head> & ...
- js实现复制粘贴功能
在项目中使用到复制粘贴功能,虽然网上有很多大牛封装了很多的插件,但是还是想不去使用插件,就像自己来实现这个功能. 另一篇是禁止复制粘贴 前端er怎样操作剪切复制以及禁止复制+破解等 初步想法: 1. ...
随机推荐
- MIGO 收货
ls_code-gm_code = '01'. 01 - MB01 - Goods Receipts for Purchase Order 02 - MB31 - Goods Receipts for ...
- Spring Boot连接MySQL报错“Internal Server Error”的解决办法
报错信息如下: {timestamp: "2018-06-14T03:48:23.436+0000", status: 500, error: "Internal Ser ...
- Flutter 页面下拉刷新和上拉加载
flutter_easyrefresh 正如名字一样,EasyRefresh很容易就能在Flutter应用上实现下拉刷新以及上拉加载操作,它支持几乎所有的Flutter控件.它的功能与Android的 ...
- IDEA配置Hystrix过程中报错: java.lang.IllegalStateException: No instances available for user-service
最近在练习微服务架构中, 使用IDEA配置完Hystrix, 添加熔断方法后, 在浏览器中访问未启动的( 含有熔断方法注解 )的路径时, 报出了 : 500: No instances availab ...
- IDEA配置SpringBoot应用的profile启动参数
参考博客:https://blog.csdn.net/li396864285/article/details/83576829 如图为, 配置多台eureka的启动参数, 分别为: --spring. ...
- 日志.VC
1. int WriteLog(char* _pcFullFileName, char* _pcWrite, int _iWriteLen, unsigned long * _pdwWritten) ...
- 最新 昆仑万维java校招面经 (含整理过的面试题大全)
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.昆仑万维等10家互联网公司的校招Offer,因为某些自身原因最终选择了昆仑万维.6.7月主要是做系统复习.项目复盘.Leet ...
- CentOS7.0 测试环境准备过程
1. 公司最近开始走向国产化和开源路线,因为绝大多数国产化都是采取的linux路线, 所以为了保证兼容性, 测试环境大部分从windows迁移到了linux环境. 测试采取逐步推进的模式, 先测试兼容 ...
- 飞腾PC机器与奔腾G645的PC机器以及E5-2630V4虚拟机内存性能简单对比
1. 对比工具 sysbench 2. 对比命令 sysbench --test=memory --memory-total-size=12G --num-threads= run 3 安装方式 #u ...
- C# DataTable映射成Entity
using System; using System.Collections.Generic; using System.ComponentModel.DataAnnotations.Schema; ...