使用clipboard实现前端页面复制到粘贴板的功能

Astrian 发布于2019-08-21 16:01 / 928人阅读

摘要：最近公司需要做一个实现复制的功能，本来以为会是很简单两三行代码的事，后来发现网上说的那些原生实现复制的方法很多浏览器因为安全的原因都不支持了，尝试了很长时间，还是死心了，决定使用第三方的库。

最近公司需要做一个js实现复制的功能，本来以为会是很简单两三行js代码的事，后来发现网上说的那些原生js实现复制的方法很多浏览器因为安全的原因都不支持了，尝试了很长时间，还是死心了，决定使用第三方的js库。
最先看了利用flash技术的ZeroClipboard，体积庞大不好用放弃了。
最终选择了不依赖flash轻量级js库clipBoard，官网地址https://clipboardjs.com/

使用很简单
第一步：引入js库
第二步：定义标签（一般是触发复制的按钮）
第三步：实例化clipboard，调用构造函数var clipboard = new Clipboard(".btn");

结合官方给的demo看一下几种场景

1.从变量赋值内容到剪贴板

var clipboard = new Clipboard(".btn", {
        text: function() {
            return "to be or not to be";
        }
    });

点击button，"to be or not to be"会粘贴到剪贴板

2.复制页面中div/input/textarea的内容

第一种方法构造函数里定义target

hello
var clipboard = new Clipboard(".btn", {
        target: function() {
            return document.querySelector("div");
        }
    });

点击button，"hello"会粘贴到剪贴板

还有第二种方法在button里定义属性data-clipboard-target和data-clipboard-action

hello

var clipboard = new Clipboard(".btn");

同样的，点击button，"hello"会粘贴到剪贴板

input和textarea用法类似

hello

最重要的一点clipboard还定义了复制成功/失败的回调函数，方便我们去处理后面的逻辑

clipboard.on("success", function(e) {
        console.log(e);
    });

clipboard.on("error", function(e) {
        console.log(e);
    });

完。

GPU云服务器云服务器 js手机复制粘贴功能 js复制到粘贴板 asp 复制到粘贴版复制粘贴到云服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88329.html

H5复制粘贴双端适配的解决方案（终极版）

摘要：前言最终适配所有机型的方案基于官网这个库由几个不同的提供商托管。提供的复制失败的方法，进行复制失败提示复制失败请手动选择复制。上其他相关分享使用实现前端页面复制到粘贴板的功能中配合实现点击按钮复制内容到剪切板前言最终适配所有机型的方案基于clipboardjs官网https://clipboardjs.com/ 这个库由几个不同的CDN提供商托管。选择你最喜欢的：）建议使用 v...

keithyau 2019-08-22 16:10 评论0 收藏0
成功破解Python领域的世界未解之谜后，轻松完成UI自动化控制微信发送文件

摘要：前面我在自动化控制版微信该系列文中更新了控制微信发送图片的方法。根据部分群友实际工作的需要，本文将分享如何控制微信发送文件。接下来我将破解这个领域的世界未解之谜，弥补无人完成这个功能的缺陷。 ...

jayce 2021-10-08 10:05 评论0 收藏0
vue 2.x项目 vue-qriously 生成二维码并下载、cliploard复制粘贴

摘要：近日，重构项目某一老模块时，有一个功能是生成二维码并下载，还可以复制链接。先想着新模块中是否有生成二维码的插件，看了下。项目中封装了一个指令。一份用来显示的。顺带说一下，复制粘贴复制粘贴老模块中是用的仓库。近日，重构项目某一老模块时，有一个功能是生成二维码并下载，还可以复制链接。列表每项都有二维码、下载二维码和复制链接和列表上方总的二维码。老模块是用的qrocode中文文档，qrco...

littlelightss 2019-08-22 17:16 评论0 收藏0
[译] 复制文本到剪切板的clipboard.js使用方法

摘要：为什么复制文本到剪贴板应该不难。在内部我们需要获取所有匹配的元素选择器并且为它们每一个添加上事件侦听器。因为这个原因我们使用事件代理通过一个侦听器取代了多个事件监听器。从另一个元素复制文本常见的用例是复制另一个元素的内容。工作中需要使用到的一个复制插件，使用简单兼容性还行，因为没找到中文版介绍就自己翻译一下，水平有限，不一定全按文章走，如果有问题欢迎指正！！为了更加直观的展示用法,略...

itvincent 2019-08-26 10:29 评论0 收藏0