点击复制内容到剪切板(clipboard)

clipboard官方文档:https://clipboardjs.com/

安装:

1、用npm:npm install clipboard --save

2、下载:https://github.com/zenorocha/clipboard.js/archive/master.zip

使用:

1、从其他组件上复制内容:

<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">

<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>

2、剪切其他组建上的内容:

<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>

<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
    Cut to clipboard
</button>

3、复制自身组建上的内容:

<!-- Trigger -->
<button class="btn" data-clipboard-text="Just because you can doesn‘t mean you should — clipboard.js">
    Copy to clipboard
</button>

事件:

var clipboard = new ClipboardJS(‘.btn‘);

clipboard.on(‘success‘, function(e) {
    console.info(‘Action:‘, e.action);
    console.info(‘Text:‘, e.text);
    console.info(‘Trigger:‘, e.trigger);

    e.clearSelection();
});

clipboard.on(‘error‘, function(e) {
    console.error(‘Action:‘, e.action);
    console.error(‘Trigger:‘, e.trigger);
});

原文地址:https://www.cnblogs.com/Sky-Raining/p/9870443.html

时间: 2024-10-03 04:45:45

点击复制内容到剪切板(clipboard)的相关文章

记录使用clipboard.js实现点击复制链接到剪切板的历程

记录使用clipboard.js实现点击复制链接到剪切板的历程 前几天接到一个任务,让实现当用户在首页点击按钮(说是按钮,只是外观是按钮,其实是一个a标签)时弹出弹窗告诉用户已经复制了活动链接,同时将链接复制到用户的剪切板中. 听起来贼简单的功能,分任务的时候甚至有人说就1,2行代码就搞定了.于是这简单的任务就给了我(菜鸟实习生  =-=),我真是信了你的邪~~!. 在我做的时候,才发现,听起来挺简单的任务,但是如果要实现对不同浏览器兼容,其实并不简单. 列举一下我找到的各种实现方法吧: 1.d

zclip 复制内容到剪切板

直接上代码 </pre><pre code_snippet_id="411566" snippet_file_name="blog_20140630_3_1654861" name="code" class="html"><!DOCTYPE html> <html> <head> <title>ZeroClipboard Test</title>

C# 复制内容到剪切板

Clipboard.Clear();//清空剪切板内容 Clipboard.SetData(DataFormats.Text, "复制内容");//复制内容到剪切板

js复制内容到剪切板,兼容pc和手机端,支持Safari浏览器

最近,一些项目中用到监听用户复制.剪切的操作. 案例1.在PC端,当用户获得一个京东卡的使用券,当用户使用ctrl + C复制得到的使用券时,将使用券的代号复制到粘贴板,以便于用户ctrl+v进行粘贴. 案例2:在移动端(android 和 iOS端),用户获得邀请码之后,可以使用一键复制的功能,将邀请码复制到剪切板,然后在app中进行兑换. 使用jQuery中的方法监听用户的剪切.复制.粘贴的行为 $("#cut").on("cut",function(){ al

js实现复制内容到剪切板,兼容pc和手机端,支持Safari浏览器

Javascript原生有一些事件:copy.paste.cut, 这些事件可以作用的目标元素: 能获得焦点的元素 (如contentEditable内容能编辑或者可以选中的元素),或者是<body> <div id="cardList"> <div class="btn">点击我,复制我</div> </div> <script type="text/javascript">

浏览器点击复制粘贴到剪切板的解决

最近在做一个东西,需要的是复制文本里的内容 稍微研究了下关于H5的复制粘贴到剪切板的api,感觉兼容不尽人意 要么就是浏览器之间,要么就是方法需要支持https才可以,寻找了很久才找到一个符合我期许的一个插件clipboard.js 使用方法也是比较简单,直接引入js就可以使用,非常的方便快捷 1 <script type='text/javascript' src="https://cdn.staticfile.org/clipboard.js/1.5.15/clipboard.min.

简单实现兼容各大浏览器的js复制内容到剪切板

因为网站文章需要提供几个按钮,单击后实现复制文章内容到剪贴板. 在网上搜索了很多内容,发现都比较乱这里自己整理下,分享给大家 效果图如下: 之前使用的是window.clipboardData.setData,只能支持IE和火狐.360浏览器.搜狗等浏览器,都泪崩.所以,研究了ZeroClipboard,尽量使用js代码写. 使用前先引用三个东西(没有提供上传附件,这里就不提供下载地址了,很常见,大家自己找度娘吧): jquery-1.4.1.min.js    ZeroClipboard.js

在多浏览器使用JS复制内容到剪切板,无需插件

最近在学习DHTMLX,下载了一些JS源码,使用谷歌浏览器,在学习dhtmlxGrid部分进行复制表格内容时,发现,在线版的可以复制成功,而本地的不可以复制,报类似访问剪切板错误,经查找原因,原来是谷歌处于安全考虑,不支持调用剪切板.我直接访问了在线的js,拷贝下来,和本地的对比了一下,代码不一样.简单研究了一下在线的js,发现,在线版的js里面有_clip_area,而调试中发现var c = this._clip_area = document.createElement("textarea

Unity3d 开发(八)复制内容到剪切板

将文本复制到剪切板中其实是有接口的,需要借助TextEditor这个类,代码如下: TextEditor te = new TextEditor(); te.content = new GUIContent(outputTime.ToString()); te.SelectAll(); te.Copy();