好程序员web前端分享js剪切板Clipboard.js 使用

好程序员web前端分享js剪切板Clipboard.js 使用，clipboard.js是一个用来设置剪切板的库，小巧无依赖，但用法有点诡异，必须依赖一个DOM元素。

必须要与一个DOM元素相关联，并且需要用户的点击操作才能实现功能（这样看来，浏览器还是挺安全的）

普通使用推荐下面这种用法，这里的text可以动态设置，可以写一个js函数动态返回text

var clipboard = new ClipboardJS('#btn', {

text: function(trigger) {

return trigger.getAttribute('aria-label');

// return randomText();

}

});

clipboard.on("success", function (e) {

console.log("复制成功");

});

clipboard.on("error", function (e) {

console.log("复制失败，请手动复制");

});

如果要在bootstrap的modal中使用，上面的代码会无法正常工作，需要在构造函数里多传入一个container，这个container就是这个模态框

var clipboard = new ClipboardJS('#btn', {

text: function(trigger) {

return trigger.getAttribute('aria-label');

container: document.getElementById('dialog')

});

clipboard.on("success", function (e) {

console.log("复制成功");

});

clipboard.on("error", function (e) {

console.log("复制失败，请手动复制");

});

界面里没有button也是可以用的

jQuery(document).on('tap', '#wechat_account', function (evt) {

var clipboard = new ClipboardJS("#wechat_account");

clipboard.on("success", function (e) {

mui.toast("微信号复制成功");

});

clipboard.on("error", function (e) {

mui.toast("微-信号复制失败，请手动输入微-信号");

});

$('#wechat_account').trigger('click');

});

转载于:https://blog.51cto.com/14249543/2377842

好程序员web前端分享js剪切板Clipboard.js 使用相关推荐

好程序员web前端分享JS引擎的执行机制
好程序员web前端分享JS引擎的执行机制,请先着重牢记两点!JS是单线程语言. JS的EventLoop是JS的执行机制.深入了解JS的执行,就等于深入了解JS里的eventloop. 1.灵魂三问: ...
好程序员web前端分享如何理解JS单线程
好程序员web前端分享如何理解JS单线程,JS本质是单线程的.也就是说,它并不能像JAVA语言那样,两个线程并发执行. 但我们平时看到的JS,分明是可以同时运作很多任务的,这又是怎么回事呢? 首先,J ...
好程序员web前端分享HTML基础篇
好程序员web前端分享HTML基础篇,最近遇到很多新手,都会问,如果要学web前端开发,需要学什么?难不难学啊?多久能入门之类的问题?那么今天好程序员就先来给大家分享一下web前端学习路线:HTML基 ...
好程序员web前端分享DIV+CSS3和html5+CSS3有什么区别
为什么80%的码农都做不了架构师?>>> 好程序员web前端分享DIV+CSS3和html5+CSS3有什么区别,不管是DIV+CSS3还是html5+CSS3,他们都是我们对 ...
好程序员web前端分享Nodejs学习笔记之Stream模块
好程序员web前端分享Nodejs学习笔记之Stream模块一,开篇分析流是一个抽象接口,被 Node 中的很多对象所实现.比如对一个 HTTP 服务器的请求是一个流,stdout 也是一个流.流 ...
好程序员web前端分享使用JavaScript正则表达式如何去掉双引号
为什么80%的码农都做不了架构师?>>> 好程序员web前端分享使用JavaScript正则表达式如何去掉双引号,最近接了一个项目,项目需求需要用js正则表达式过滤掉页面文本域 ...
JavaScript id_好程序员web前端分享Javascript中函数作为对象
好程序员web前端分享Javascript中函数作为对象,Javascript赋予了函数非常多的特性,其中最重要的特性之一就是将函数作为第一型的对象.那就意味着在javascript中函数可以有属性, ...
好程序员web前端分享MVVM框架Vue实现原理
好程序员web前端分享MVVM框架Vue实现原理,Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js和react.js更加简洁 ...
好程序员web前端分享常见html5语义化标签
为什么80%的码农都做不了架构师?>>> 好程序员web前端分享常见html5语义化标签,我们知道,创建结构清晰的页面可以建立良好的语义化基础,也降低了使用css的难度,下面总 ...

好程序员web前端分享js剪切板Clipboard.js 使用

好程序员web前端分享js剪切板Clipboard.js 使用相关推荐

最新文章

热门文章