JS 复制文本到剪切板

提到复制文本到剪切板 就必须要提一下 两个插件

  • ZeroClipboard.js
  • Clipboard.js

ZeroClipboard 使用的 Flash 解决方案,现在浏览器都还支持,但有些默认不会加载 Flash,所以不建议使用。 Clipboard 不用 Flash 好处显而易见,更现代一些, 具Clipboard 官网介绍:

A browser extension that adds a "copy to clipboard" button to every code block on GitHub, MDN, Gist, StackOverflow, StackExchange, npm, and even Medium.

一个浏览器扩展,为GitHub,MDN,Gist,StackOverflow,StackExchange,npm甚至Medium中的每个代码块添加“复制到剪贴板”按钮。 当然这里不是介绍插件的,是说具体代码的 干货如下:

/**
 * 复制文本到剪切板,需在用户 (click 事件) 事件回调函数里 调用
 * 如
 * window.addEventListener('click', function(e){
 *    copy(e.target.outerHTML);
 * }, true);
**/
function copy(text){
    var $text = document.createElement('textarea');
    var current = document.activeElement;
    $text.value = text;
    document.body.appendChild($text);
    $text.select();
    document.execCommand('copy', true);
    document.body.removeChild($text);
    current.focus();
}

Github 地址 sc419/copy