Clipboard.js实现复制文本到剪贴板功能

2017年07月19日 11:11:00 阅读数：1508 标签： clipboard 更多

个人分类： JS

Clipboard.js是一个轻量级的实现复制文本到剪贴板功能的JavaScript插件，该插件可以将输入框，文本域，DOM节点元素中的文本内容复制到剪贴板中。

官网地址：https://clipboardjs.com/

浏览器兼容性：兼容Chrome、Firefox、Opera、Safari、IE9+

对于不兼容的浏览器版本也有优雅的降级处理，可以采用下面的方式

clipboard.on('error', function(e) {
alert('请选择手动复制!')
});

使用方法如下：

1、在页面引入clipboard.js

<script type="text/javascript" src="js/clipboard.min.js"></script>

2、从元素内容复制文本

设置触发元素的data-clipboard-action属性，该属性的值为copy（复制）/cut（剪切）

设置data-clipboard-target属性，该属性值是要复制/剪切的目标元素的ID


<span class="url" id="copyUrl">http://blog.csdn.net/oucqsy</span>

<a href="javascript:;" class="btn" id="copyBtn" data-clipboard-action="copy" data-clipboard-target="#copyUrl">复制</a>

3、从元素属性复制文本

 <a href="javascript:;" class="btn" id="copyBtn" data-clipboard-text="http://blog.csdn.net/oucqs">复制</a>

4、执行JS事件

var clipboard = new Clipboard('#copyBtn');
clipboard.on('success', function(e) {
e.clearSelection();
console.log('success');
});
clipboard.on('error', function(e) {
console.log('error');
});

Clipboard.js实现复制文本到剪贴板功能相关推荐

clipboard使用总结（复制文本到剪贴板功能的JavaScript插件）
1. 概述 clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件.通过该插件可以将输入框,文本域,DIV元素中的文本等文本内容复制到剪贴板中 clipboard.j ...
html5 复制到剪贴板兼容,JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
Clipboard.js：不用Flash实现剪贴板功能的轻量级JavaScript库
Zeno Rocha发布了一个专门用于从web页面向本地计算机的剪贴板复制文本的JavaScript库:Clipboard.js. \\ 在每一个Github仓库页面的侧边栏上都有一个小部件,用来显示 ...
《JS实现复制内容到剪贴板功能，可兼容所有PC浏览器，不兼容手机端》
前记:本来原生的JS是有提供一个函数来实现这个功能(window.clipboardData),但是很遗憾,这个函数仅仅支持IE和FF浏览器,所以基本用处不大.下边介绍的是一个第三方插件库(ZeroC ...
使用clipboard.js实现复制内容至剪贴板
下载插件 clipboard.js是不依赖flash,实现复制内容至剪贴板的js插件.下载clipboard.js的压缩包,根据需要选择dist目录下的压缩或未压缩版. github地址:https: ...
轻量级的实现复制文本到剪贴板功能的 js
官网地址:https://clipboardjs.com/ 第一步引入js 文件 <script type="text/javascript" src="./jq ...
Clipboard.js – 现代方式实现复制文本到剪贴板
复制文本到剪贴板应该并不难,目前已经有很成熟的 Flash 方法.但是 Flash 已经在很多场合不适用了,特别是随着 HTML5 技术的发展.今天推荐的这个 Clipboard.js 库不依赖 Fl ...
js复制文本到剪贴板_如何将文本和图像固定到Windows 10的剪贴板历史记录
js复制文本到剪贴板 Windows 10 makes copy and paste more convenient with a feature called Clipboard history. ...
js复制文本到剪贴板_如何将输出文本从命令行复制到Windows剪贴板
js复制文本到剪贴板 If you're doing work at the command line on your Windows box, it's sometimes useful to co ...
jQuery/Js复制文本到剪贴板
<!doctype html> <html lang="en"><head><meta charset="UTF-8" ...

Clipboard.js实现复制文本到剪贴板功能

Clipboard.js实现复制文本到剪贴板功能相关推荐

最新文章

热门文章