使用clipboard.js插件实现复制功能

之前做前端项目时，用到了复制功能，在网上寻找一圈后，找到了Clipboard.js这个插件。在使用之后，顿时感觉十分的方便，支持ie9及以上。

---

主要有3个主要的属性：

• data-clipboard-text="copytext" 自定义复制内容
• data-clipboard-action="copy" 还可选“cut”
• data-clipboard-target="dom"指向要复制的dom，可以是input/textarea，也可以是div等其他dom

下面是使用的例子：

1. 复制input/textarea框中的内容：

html:

	<input id="foo" type="text" value="hello">
	<!-- <textarea id="foo">hello</textarea> -->
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>

js:

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

    clipboard.on('success', function(e) {
        console.log(e);
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });

---

2. 复制自定义内容_1（在方法内定义）：

	<button class="btn">Copy</button>
	<script>
	    var clipboard = new ClipboardJS('.btn', {
	        text: function() {
	            return 'to be or not to be';
	        }
	    });
	    
	    clipboard.on('success', function(e) {
	        console.log(e);
	    });
	
	    clipboard.on('error', function(e) {
	        console.log(e);
	    });
    </script>

3. 自定义复制内容_2（在行内定义）

	<button class="btn" data-clipboard-text="1">Copy</button>
	<script>
	    var clipboard = new ClipboardJS('.btn');
	
	    clipboard.on('success', function(e) {
	        console.log(e);
	    });
	
	    clipboard.on('error', function(e) {
	        console.log(e);
	    });
    </script>