clipboard.js
一个现代化的复制到剪切板的解决方法。Flash?框架?通通见鬼去吧。压缩后仅3kb。


### 为什么要创造这个?

复制文本到剪切板不该是个难事。它不应该要求繁杂的步骤来部署或者要加载几百kb的东西。不管如何,它不该依赖flash或者臃肿的框架。

这,就是clipboad.js存在的理由。

### 安装

你可以通过npm安装。

npm install clipboard –save
</pre> 或者bower <pre>bower install clipboard –save
</pre> 如果你不打算用包管理工具,直接[下载zip](https://github.com/zenorocha/clipboard.js/archive/master.zip)文件吧。(左侧是github下载,传了份到百度云 [备用下载](http://pan.baidu.com/s/1hrIX40k)最好用左边的下载,那样能获取最新版。) ### 设置 首先,包含位于dist内的clipboard.min.js,或者从一个第三方cdn引入。 <pre><script src="dist/clipboard.min.js"></script>
</pre> 接着,你需要对它示例化。有三种实例化方法: <fieldset> <legend>方法1:传递DOM选择器</legend> <pre><button class="btn" data-clipboard-text="1">Copy</button>
<button class="btn" data-clipboard-text="2">Copy</button>
<button class="btn" data-clipboard-text="3">Copy</button>
<script>
var clipboard = new Clipboard(‘.btn’);
</script>
</pre> </fieldset> <fieldset> <legend>方法2:传递HTML元素</legend> <pre><div id="btn" data-clipboard-text="1">
<span>Copy</span>
</div>
<script>
var btn = document.getElementById(‘btn’);
var clipboard = new Clipboard(btn);
</script></pre> </fieldset> <fieldset> <legend>方法3:传递一列表的HTML元素</legend> <pre><button data-clipboard-text="1">Copy</button>
<button data-clipboard-text="2">Copy</button>
<button data-clipboard-text="3">Copy</button>
<script>
var btns = document.querySelectorAll(‘button’);
var clipboard = new Clipboard(btns);
</script>
</pre> </fieldset> 通常而言,我们要用你的选择器来为每个选中的元素赋予事件监听器是个很消耗内存的操作。然而,我们通过[事件分发机制](https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation)替代了多个事件分发器,所以即使你的网站是web app,也无需担心因为引入而产生问题。 ### 使用 #### 从另一个元素复制文本 一个非常普遍的用法是从另一个元素复制内容。具体做法是为你的触发元素添加一个data-clipboard-target属性。 这个属性的值是css选择器,被这个选择器选中的元素的内容将被复制。 <fieldset> <pre><!– Target –>
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git"&gt;

<!– Trigger –>
<button class="btn" data-clipboard-target="#foo">
复制
</button>
</pre> </fieldset> #### 从另一个元素剪切文本 <fieldset> <legend>例子</legend> <pre><button class="btn" data-clipboard-text="Just because you can doesn’t mean you should — clipboard.js">
剪切
</button>
</pre> </fieldset> ### 事件 有时候你会希望显示一点反馈信息或者在复制/剪切或展示一下剪切的内容。successerror事件正是为此准备的。通过监听它们即可实现想要的功能。 <pre>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);
});
</pre> 不妨打开你的控制台来验证一波。 ### 高级使用 要是你不想改变你的HTML,这有个相当方便的API可以用。你所需要做的就是声明一个函数,做你想做的,然后返回一个值。 例如,如果你想动态地设置一个target,那么你需要返回一个Node。 <pre>new Clipboard(‘.btn’, {
target: function(trigger) {
return trigger.nextElementSibling;
}
});
</pre> 如果要动态地设置一段text<sup id="fnref-1">[1](#fn-1)</sup>,那么你需要返回一个字符串。 <pre>new Clipboard(‘.btn’, {
text: function(trigger) {
return trigger.getAttribute(‘aria-label’);
}
});
</pre> 要是你正在处理一个单页面的apps,你也许想要精确的管理DOM的生命周期。以下便是清理我们创建的事件和对象的方法。 <pre>var clipboard = new Clipboard(‘.btn’);
clipboard.destroy();

### 兼容性

这个库依赖SelectionexecCommandAPI。第一个几乎支持所有浏览器然而第二个仅支持如下浏览器。

clipborad_support
clipborad_support


好消息是clipboard想要支持较老版本的浏览器并不困难。你只要在success事件触发时显示一个tooltip复制成功!,在error事件触发时为用户选中需要的内容并提示用户请使用Ctrl+C复制2



*

1. 要复制到剪切版的内容 

2. 这个可以参考本站在兼容UC时的做法,不过本站的没做IE的兼容 兼容IE可以参考此文