JS代码实现复制功能
本人没什么基础看了好久百度,不知道为什么在百度上问一个js实现copy功能会多出那么多代码出来,感觉废话一堆效果还没能达到需要复制 的效果。
然而在我看来,js复制代码 无非就那么几句罢了。原生copy代码:document.execCommand("Copy"); 就可以达到复制的效果了,但我习惯用以下的方法:
首先,必须要调用第三方【clipboard.min.js】包,有它才能js代码才能实现复制功能,js包网上都可以下。这个如同jQuery一样调用:<script src="../js/clipboard.min.js"></script> 即可,这是第一句代码;
第二句代码 对对象进行操作的方式方法有两种可以选择:
(1)data-clipboard-action="copy"; 复制
(2)data-clipboard-action="cut"; 剪切
第三句代码 copy或cut 的对象是谁:
data-clipboard-target=".abc" //这个对象可以是 #id,也可以类选择器 .class ,也可以是元素等等
第四句代码 实例化 Clipboard 对象:
var clipboard = new Clipboard(".abc"); 到这里代码就已经实现了复制的功能了
-----------------------------------------------------------------------------------------------------------------------------------------
看看 案例代码:
(1)纯文本copy:textarea
<script type="text/javascript" src="../js/clipboard.min.js"></script>
<script type="text/javascript">
function copyUrl2(){
var Url2=document.getElementById("biao1");//获取文本框id
Url2.select(); // 选择对象用户定义的代码区域
document.execCommand("Copy"); //原生copy方法执行浏览器复制命令
alert("内容复制成功,去粘贴看看!"); //弹窗
//window.location.href = 'weixin://'; //打开手机微信
}
</script>
<textarea cols="27" rows="5" id="biao1">这里面的文本内容被复制 </textarea>
<input type="button" onClick="copyUrl2()" value="点击复制Copy" />
-------------------------------------------------------------------------------------------------
(2)非纯文本内容的某个标签:span例举
<span id="btn" class="abc" data-clipboard-action="copy" data-clipboard-target=".abc">这里可以点击复制</span>
点击内容直接执行js代码:
<script type="text/javascript" src="../js/clipboard.min.js"></script>
<script type="text/javascript">
var clipboard = new Clipboard("#btn"); //实例化对象
//复制成功执行的回调
clipboard.on('success', function(e) {
console.log(e); //返回值类型给控制台 没什么用 可以注释掉
alert("复制成功,去粘贴看看吧!");
//window.location.href = 'weixin://'; //打开手机微信
});
//复制失败执行的回调
clipboard.on('error', function(e) {
alert("复制失败!请手动复制")
});
</script>
最新文章
- VB操作EXCEL文件
- SQL SERVER 2012链接到SQL SERVER 2000的问题解决案例
- deepin linux 安装 mysql
- C++ 中指针与引用的区别
- 使用Memcached提高.NET应用程序的性能
- java.net.SocketException:Software caused connection abort: recv failed 异常分析 +socket客户端&;服务端代码
- Having与Where的区别
- [开发笔记]-WindowsService服务程序开发
- Some regret....
- 【转】SendMessage及WPRAME、LPARAME
- Android xml 解析
- Centos学习
- Spring Aspect 用法略讲
- LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页
- Ceph部署(一)集群搭建
- SqlBulkCopy 参数配置示例
- dirlock_windows.go
- Dynamics 365工作流报错:您无法登陆系统。原因可能是您的用户记录或您所属的业务部门在Microsoft Dynamics 365中已被禁用。
- sql server 无法sa登录解决办法
- SMB服务简介
热门文章
- Delphi中close与Terminate方法的区别
- WPF 的DynamicResource的NewLine问题
- WPF获取和设置应用程序范围的资源
- android中优雅实现recyclerview
- 程序的开机关机重启,开机启动,休眠功能delphi实现(使用AdjustTokenPrivileges提升权限)
- QSqlQueryModel 居然默认是只读的!
- CKEditor 4.5 beta 发布,可视化 HTML 编辑器
- 分享Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站
- spark 源码分析之四 -- TaskScheduler的创建和启动过程
- Java 程序员的大数据入门指南