jQuery+layer+clipboard实现复制到剪贴板的功能，兼容各大主流浏览器

最新推荐文章于 2022-09-17 13:53:37 发布
最新推荐文章于 2022-09-17 13:53:37 发布
阅读量5.2k 收藏
点赞数 1
分类专栏： 前端技术 文章标签： clipboard 剪贴板
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weng_xianhu/article/details/79419869
版权

最近在研发微信公众平台的后台管理，上传永久素材时会用到复制到剪贴板的功能，想着提升用户体验，也方便自己后台的操作。于是在网上找了发现有个插件可以实现，有些网友也分享了示例，但还是不能满足我的需求，便琢磨了如何结合 jQuery+layer+clipboard，利用layer消息框实现复制到剪贴板的功能，美观又兼容性好，下面分享效果图以及实现代码。

27d313d1cdb085b41307edc8dc202801.png


75035d17d1cfaa3b621c5b696cad7df8.png


示例：https://pan.baidu.com/s/1c3EbaFm

小虎哥-技术博客
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
jquery 一键复制指定内容到剪贴板
01-17
jquery 一键复制指定内容到剪贴板，适合web项目中有一键复制德需求。事件可以绑定到任意指定元素上，非常方便快捷。
jquery实现内容复制
monster
07-13 1394
按钮 <button type="button" id="copy-ip" class="layui-btn layui-btn-xs copy-data" onclick="copy($('#ip').val(),'#copy-ip')">复制</button> 被复制内容 <input type="text" id="ip" class="layui-input" style="line-height: 38px;"> 引入 js 库 <script t
Layui 中点击按钮复制链接
qq_60969145的博客
09-17 2536
点击复制后，即可复制到粘贴板上。
jquery 复制插件
wilson_hj的博客
07-20 607
实例: 复制 var btn = document.getElementById('copy_btn'); var clipboard = new Clipboard(btn);//实例化 //复制成功执行的回调，可选 clipboard.on('success', function(e) { layerTis('复制成功'); });
点击复制按钮，复制所需内容
fishnotcat的博客
08-12 887
js页面复制，自动复制所需数据
layui点击复制
白夜行
06-16 3866
首先需要引用js文件， <script th:src="|${portalDomain}/commons/common/js/clipboard.min.js|"></script> 一定不要忘记，否则没有效果。 然后在layui表格中加入一下属性 {field: 'coverUrl', title: '封面地址', align: 'center',sort:true,width:110,templet:function (d) { retu
layer鼠标悬浮，点击弹窗，点击自动复制
元曦的博客
07-11 710
$(".fEpzovRa").mouseover(function() { layer.tips('哎哟~~发现点这里可查看微信二维码', this, { tips: [1, '#0FA6D8'], area: '250px', time: 5000 }); }); $(".fEpzovRa").click(function(e) { $('.wind_tctsk')..
前端页面复制粘贴插件Clipboard的使用
安树的博客
05-23 3448
clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框，文本域，DIV元素中的文本等文本内容复制到剪贴板中 1、引入JS文件：&lt;script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="https...
layui表格点击复制到剪切板
qq_38181746的博客
07-20 2391
点击复制内容到剪切板
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
10-22
主要介绍了Zero Clipboard实现浏览器复制到剪贴板的方法,带有多个复制按钮效果,涉及jQuery插件ZeroClipboard.js具体使用步骤与相关技巧,需要的朋友可以参考下
兼容主流浏览器的JS复制内容到剪贴板
12-10
现在浏览器种类也越来越多，诸如 IE、Firefox、Chrome、Safari等等，因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了。 在FLASH 9 时代，有一个通杀所有浏览器的js复制内容到剪贴板的方案： ...
js实现点击复制当前文本到剪贴板功能（兼容所有浏览器）
10-23
主要介绍了js实现点击复制当前文本到剪贴板功能，兼容所有浏览器，感兴趣的小伙伴们可以参考一下
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
01-19
目前，如果使用javascript来写复制到剪贴板的代码，一般都是浏览器不兼容的。所以采用flash的方式，模拟一个层，再来复制，就可以做到全部浏览器都适用哦~ 需要下载一个swf文件，和一个js文件。把这两个文件，和htm...
文本框限制输入字数的JS
小虎哥－不可能变成可能
04-02 2021
HTML代码：其中：class="ui-text" 、class="ui-input"、data-num="48"、class="ui-textTips"，是必不可少的。 &lt;div class="div-p ui-text"&gt; &lt;ul&gt;&lt;li&gt;&lt;/li&gt;&lt;li&gt;
javascript中模仿php的serialize和unserialize序列化函数
小虎哥－不可能变成可能
08-20 1794
/* phpserializer.js - JavaScript to PHP serialize / unserialize class. * * This class is designed to convert php variables to javascript * and javascript variables to php with a php serialize u
教你用js超简单实现页面自动控制图片的宽度和高度
小虎哥－不可能变成可能
08-20 1412
在图片里加句简单的js轻松实现页面自动控制图片的宽高度，使图片不变形 拆开后的代码： 同时控制高度和宽度：   onload="if(this.height>75){                       this.height=75;                 }else{                         if(this.width
jquery中获取下拉框的文本值
小虎哥－不可能变成可能
08-20 1095
获取下拉框的属性值：$(this).val(); 获取下拉框的文本值：$(this).find('option:selected').text();
javascript获取当前时间(年-月-日 时:分:秒)
小虎哥－不可能变成可能
08-20 1071
javascript获取当前时间(年-月-日 时:分:秒)   var getCurrentDateTime = function() { //获取当前时间 var now= new Date(); var _month = ( 10 > (now.getMonth()+1) ) ? '0' + (now.getMonth()+1) : now.getMonth()
实现复制到剪贴板功能vue
最新发布
09-07
要实现在Vue中的复制到剪贴板功能，你可以使用第三方库vue-clipboard2。以下是如何使用它的步骤： 1. 首先，使用 npm 或 yarn 安装 vue-clipboard2： ```bash npm install vue-clipboard2 ``` 2. 在你的 Vue 组件中，引入 vue-clipboard2： ```javascript import VueClipboard from 'vue-clipboard2' ``` 3. 在你的 Vue 组件中，注册 vue-clipboard2： ```javascript export default { // ... methods: { // ... }, mounted() { this.$clipboardConfig.autoSetContainer = true; this.$clipboardConfig.appendSuccess = true; this.$clipboardConfig.appendToBody = true; Vue.use(VueClipboard, this.$clipboardConfig); } } ``` 4. 在你的Vue模板中，使用 `v-clipboard` 指令来绑定点击事件并实现复制功能： ```html <template> <div> <button v-clipboard:copy="textToCopy">复制</button> <input v-model="textToCopy" type="text" /> </div> </template> ``` 在上面的例子中，点击"复制"按钮将会复制 `textToCopy` 的值到剪贴板。 这样就完成了在Vue中实现复制到剪贴板的功能。请注意，这仅仅是使用vue-clipboard2库的一种方式，你也可以使用其他的库来实现相同的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值