20 行 JS 代码，实现复制到剪贴板功能

使用系统提供的剪贴板是一项基本的IT技能。做为一个开发者，相信你已经知道使用 Ctrl/Cmd+A, Ctrl/Cmd+C 以及 Ctrl/Cmd+V 组合键就能快捷地进行选中、复制、粘贴。

但对于普通用户来讲就没那么容易了。即便用户知道剪贴板的存在，视力再好、反应再快的用户也很难选中他们想要的文字。接下来，若是用户没有掌握快捷键，或者没发现浏览器隐藏的“编辑”菜单，又或者没用过右键菜单，再或者不知道在触摸屏上须要进行长按，后续的复制过程也很难简单完成。

若是提供一个一键“复制到剪贴板”按钮，是否是就能帮到你们呢？这样的话即便是熟练的键盘快手也会乐于使用吧。

剪贴板的安全机制

几年前，由于浏览器不具有直接访问剪贴板的能力，开发者只能借助于Flash插件来提供这一基本功能。

乍一看开放剪贴板权限彷佛没什么危害，但试想若是浏览器能随意查看和操做剪贴板内容的话，页面脚本（包括第三方脚本）岂不是就能轻松偷窥其中的信息而后将密码，敏感信息，甚至整个页面发送给远端的服务器了。

如今，咱们已经能够整合基本的剪贴板功能，但仍是有一些限制：

大部分浏览器支持剪贴板功能，Mac和iOS上的Safari除外。

不一样浏览器的支持程度不尽相同，一些功能并不完整或存在缺陷。

用户必须经过点击鼠标或按键的方式来主动触发，脚本并不能随时操纵剪贴板。

document.execCommand() 方法

document.execCommand() 是须要调用的关键方法，它能够传入的参数包括 ‘cut’, ‘copy’ 和 ‘paste’ 。这里重点介绍最实用的 document.execCommand(‘copy’) 方法。

在调用以前，可使用 document.queryCommandSupported(‘copy’); 或 document.queryCommandEnabled(‘copy’); 方法（这两个方法功能相同）来检测浏览器是否支持复制命令。须要注意的是，Chrome 虽然支持复制命令的，但在 Chorme 中这两个方法都会返回 false 值。检测 document.execCommand 方法是否存在也是一个判断方法，但更好的作法是将 document.execCommand(‘copy’) 调用放在 try-catch 块内。

接下来就得考虑用户能复制什么内容了，脚本须要可以选中文本，好在全部的浏览器都容许使用 select() 方法选择文本输入和文本区域的内容，而且在 Firefox 和 Chrome／Opera 浏览器中，还能使用 document.createRange 方法来从任何元素中选择文本。

// select text in #myelement node

// 选择 #myelement 标签中的文本

var

  myelement = document.getElementById('#myelement'),

  range = document.createRange();

range.selectNode(myelement);

window.getSelection().addRange(range);

然而，IE/Edge 并不支持这一方法。

使用clipboard.js

若是你已经放弃打造一个高鲁棒性的跨浏览器剪贴板方案，那么 clipboard.js 会是一个不错的选择。它提供了多种配置方法，例如经过添加 HTML5 数据属性来指定触发器和复制对象。

<input id="copyme" value="text in this field will be copied" />

<button data-clipboard-target="#copyme">copy</button>

本身来实现

虽然 clipboard.js 只有 2kb，但咱们只用20行代码就能实现，前提是你能接受如下条件：

• 只有对应的表单区域可以被复制

• 在一些浏览器中无效（没错，就是Safari），但能够在选中文本后提示用户使用快捷键 Ctrl/Cmd + C。

像 clipboard.js 同样，咱们会使用一个按钮做为触发器，添加数据属性（data-copytarget）来指定拷贝内容的目标（#website）：

<input type="text" id="website" value="http://www.sitepoint.com/" />

<button data-copytarget="#website">copy</button>

下面的自执行函数会给全部带有 data-copytarget 属性的元素添加一个点击事件处理方法，去选中区域里的文本并执行 document.execCommand(‘copy’) 。若是这一操做失败了，文本将保持选中状态同时弹出提示。

(function() {

  'use strict';

  // click events

  // 添加点击事件

  document.body.addEventListener('click', copy, true);

  // event handler

  // 添加时间处理方法

  function copy(e) {

    // find target element

    // 搜索目标元素

    var

      t = e.target,

      c = t.dataset.copytarget,

      inp = (c ? document.querySelector(c) : null);

    // is element selectable?

    // 判断元素是否能被选中

    if (inp && inp.select) {

      // select text

      // 选择文本

      inp.select();

      try {

        // copy text

        // 复制文本

        document.execCommand('copy');

        inp.blur();

      }

      catch (err) {

        alert('please press Ctrl/Cmd+C to copy');

      }

    }

  }

})();

其余用途

你还能够设计出更棒的剪贴板功能特性。例如，在 Trello.com 网站中，当你把鼠标指针放在任何卡片上方时，使用快捷键 Ctrl/Cmd+C 就能将卡片的url复制到剪贴板。实际上，程序建立了一个包含 URL 地址的隐藏表单而后进行了选中和复制。虽然我怀疑不多有用户会知道这一功能，但这的确是实用又聪明的方法！