Clipboard.js 使用说明

一、说明

clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框，文本域，DIV元素中的文本等文本内容复制到剪贴板中 
clipboard.js支持主流的浏览器：chrome 42+; Firefox 41+; IE 9+; opera 29+; Safari 10+; 

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

虽然要求Safari版本在10以上，但是作者做了很好的优雅降级：

The good news is that clipboard.js gracefully degrades if you need to support older browsers. All you have to do is show a tooltip saying Copied! when success event is called and Press Ctrl+C to copy when error event is called because the text is already selected.

 也就是说，Safari版本是10以上的，可以直接成功复制；如果是版本小于10，可以通过如下代码提示用户手动复制：

clipboard.on('error', function(e) {
    alert('请选择“拷贝”进行复制!')
});

二、使用方式

2.1 引入js文件

以下所有的代码都使用到以下js文件

clipboard复印内容的方式有 

- 从target复印目标内容 
- 通过function 要复印的内容 
- 通过属性返回复印的内容

2.2 从target复印目标内容

可以从input、textare、div中通过copy/cut获取内容目标内容，其HTML的代码如下

• input 
  data-clipboard-target指向复印节点，这里指input的目标id 
  data-clipboard-action这里使用copy，同时也可以使用cut，则点击按钮后，内容里的值被剪切。如果没有指定，则默认值是copy。cut只能在input和textare中起作用

Copy

• textare 
  和上面的主要区别只是input和textare不同

hello 
Cut

• div 
  和上面的主要区别只是input和div不同

hello_div
Copy

以上的插件的初始化JS代码都是相同：

2.3 通过function 要复印的内容

通过target，text的function复印内容

• 通过target的function复印内容 
  通过target指定要复印的节点，这里返回舒值是‘hello’

 Copy_target
    
hello

    

• 通过text的function复印内容 
  text的function指定的复印内容，这里返回‘to be or not to be’

 Copy
 

• 多节点 
  通过button返回所有button按钮，并做为参数传送给Clipboard。每个按钮被点击时，返回值的内容是其对应的data-clipboard-text的内容，分别是1，2，3

//  多节点获取button的data-clipboard-text值
 Copy
    Copy
    Copy

• 多节点 
  通过class获取所有button按钮，并做为参数传送给Clipboard。每个按钮被点击时，返回值的内容是其对应的data-clipboard-text的内容，分别是1，2，3

//   通过class注册多个button，获取data-clipboard-text的值
Copy
    Copy
    Copy
 

补充：上面的例子Clipboard成功或者错误状态时有一个e，这个e里包含许多属性：

 clipboard.on('success', function(e) {
	        console.log(e);
	        console.log(e.action);
	        console.log(e.text);
	        console.log(e.trigger);
	        e.clearSelection();
	    });