公众号使用clipboard复制文字

为什么

拷贝文字不应当是一件困难的事. 不需要过多繁杂的配置或者下载很多脚本文件. 最重要的，它不应该依赖flash或者其他框架，应该保持简洁

这就是创造clipboard.js的原因和目的

安装

可以通过npm工具安装

npm install clipboard --save

如果你不打算进行包管理，可以直接下载 zip文件

设置

首先, 包含 dist 文件夹 或者从第三方CDN 那里获取资源.

<script src="dist/clipboard.min.js"></script>

现状, 你需要传入一个 DOM选择器, HTML 元素, 或者 HTML元素列表.

new ClipboardJS('.btn');

事实上, 我们需要对你传入的所有元素绑定事件， 但是这样操作的话，当元素很多的时候，会占据很多的内存

因为这个，我们决定使用 事件代理 减少了不必要的内存开销. #perfmatters.

使用

我们正在经历一场声明式的复兴，这就是为什么我们决定利用 HTML5 data 属性 来提高可用性的原因

从另一个元素复制文本

一个很常见的用例是从另一个元素复制内容。你可以给目标元素添加一个 data-clipboard-target 属性来实现这个功能。

这个属性的值就是能匹配到另一个元素的选择器。

<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">

<!-- Trigger -->
<button class=“btn” data-clipboard-target="#foo">
<img src=“assets/clippy.svg” alt=“Copy to clipboard”>
</button>

从另一个元素剪切文本

此外，你可以定义一个 data-clipboard-action 属性来指明你想要复制还是剪切内容

如果你省略这个属性，则默认为复制。

Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga.

Cut to clipboard

<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>

<!-- Trigger -->
<button class=“btn” data-clipboard-action=“cut” data-clipboard-target="#bar">
Cut to clipboard
</button>

正如你所料, cut 操作只在<input> 或者 <textarea> 元素上生效

从属性复制文本

事实上，你甚至不需要从另一个元素来复制内容。 你仅需要给目标元素设置一个data-clipboard-text 属性即可

Copy to clipboard

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

事件

如果你想要展示一些用户反馈，或者在用户复制/剪切后获取已经选择的文字，这里有个示例供你参考。

我们通过触发自定义事件，比如success 和 error 让你可以设置监听并实现自定义逻辑

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

打开你的调试窗口，就能看到实例演示了

Tooltips提示

每个应用有着不同的设计需求，这是为什么 clipboard.js 没有包含任何 CSS 或内置的工具提示解决方案。

你在这个网站看到的提示效果是用GitHub's Primer完成的。

高级用法

如果你不想修改 HTML，我们提供了一个非常方面的命令式的 API 给你使用。你需要做的就是声明一个函数，做一些处理，并返回一个值。

例如, 你希望动态设置target, 你需要返回一个node节点.

new ClipboardJS('.btn', {
    target: function(trigger) {
        return trigger.nextElementSibling;
    }
});

如果你希望动态设置text, 你需要返回字符串。

new ClipboardJS('.btn', {
    text: function(trigger) {
        return trigger.getAttribute('aria-label');
    }
});

如果在 Bootstrap 模态框（Modals）中使用，或是在其他修改焦点的类库中使用，你会希望将获得焦点的元素设置为 container属性的值。

new ClipboardJS('.btn', {
    container: document.getElementById('modal')
});

同样地，如果你使用单页应用，你可能想要更加精确地管理 DOM 的生命周期。你可以清理事件以及创建的对象。

福利

一个浏览器拓展程序，可以添加一个“复制到剪切板”按钮到所有的代码块，支持 GitHub，MDN，Gist，StackOverflow，StackExchange，npm，甚至 Medium。

Install for Chrome and Firefox.

原网址