web页面长按复制文本clipboard.js 使用教程

约定不等于承诺〃 2022-07-13 00:17 316阅读 0赞

# 纯JavaScript实现的复制剪切库–clipboard.js #

clipboard.js 使用纯 JavaScript （无需 Flash）实现了复制浏览器内容到系统剪切板的功能，可以在浏览器和 Node 环境中使用。支持 Chrome 42+、Firefox 41+、IE 9+、Opera 29+。

> 复制文本到剪切板并不是件困难的事情，它不需要复杂的配置步骤或者多说KBs的加载，但大多数情况下，都需要依赖Flash或者其他臃肿的框架，这就是clipboard.js存在的意义。

## 安装 ##

使用 `npm` 或者 `bower` 安装：

//You can get it on npm.
        npm install clipboard --save
         
        //Or bower, too.
        bower install clipboard --save

如果你没有上述包管理工具的话，可以直接下载 [.zip 文件][.zip]。

## 设置 ##

首先加载 js 文件：

现在你需要使用 DOM 选择器来实例化它，该选择器对应于选择元素，如：`<button class="btn">`

new Clipboard('.btn');

我们需要获取每一个匹配的元素，并为每个元素添加事件监听器，但是如果匹配元素很多的话，会消耗大量的内容。为此，我们使用[事件代表团][Link 1]，它用一个单独的侦听器替换多个事件侦听器。

## 使用 ##

### 复制元素 ###

常见的用法是从另一个元素中复制内容，你可以通过给目标元素添加一个 `data-clipboard-target`属性来指定剪贴板目标元素。

<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">    <button class="btn" data-clipboard-target="#foo"> <img src="assets/clippy.svg" alt="Copy to clipboard"> </button>

### 剪切元素 ###

另外，你还可以通过 data-clipboard-action 属性来定义是“复制 `copy` ”还是“剪切 `cut` ”内容。如果忽略该属性，则默认值为 `copy` 。

<textarea id="bar">Mussum ipsum cacilds...</textarea>    <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar"> Cut to clipboard </button>

`cut` 动作只能用于 `<input>` 或者 `<textarea>` 元素。

### 从属性中复制 ###

事实上，你甚至不需要任何其他元素就能实现复制功能。你只需在目标元素中包含一个 `data-clipboard-text` 属性即可。

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

## 事件 ##

var clipboard = new Clipboard('.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); });

## 高级用法 ##

new Clipboard('.btn', { 
        target: function(trigger) { 
        return trigger.nextElementSibling;
        }
        });
         
        new Clipboard('.btn', { 
        text: function(trigger) { 
        return trigger.getAttribute('aria-label');
        }
        });
         
        var clipboard = new Clipboard('.btn');
        clipboard.destroy();

## 浏览器支持 ##

[![clipboard\_js\_support][clipboard_js_support]][clipboard_js_support]

## 演示 ##

具体效果可以查看本站代码位置

参考文章：http://www.xttblog.com/?p=494   文章中例子执行有点问题

http://9iphp.com/web/javascript/js-copy-library-clipboard-js.html

http://blog.csdn.net/three\_bird/article/details/51336828

官网：https://clipboardjs.com/

[.zip]: https://github.com/zenorocha/clipboard.js/archive/master.zip
[Link 1]: https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation
[clipboard_js_support]: /images/20220713/1dc00fd959ed432992717a7b2554720c.png