纯JS实现剪贴板复制功能

本文介绍了JS与剪贴板相关的功能。

1.背景

事情的起因是使用阿里巴巴矢量图标库，使用页面大概长得是这样的

1.PNG

从图库里面选取适用的图标，下载资源文件放进项目中，然后就可以在项目中很方便的进行使用。

2.png

每次使用的时候都需要手动复制图标下方的类名，然后在项目中新建一个标签，并添加上类名。如果能直接把图标一点，就能把所需要的东西直接粘贴出来，就很方便。

2.Clipboard.js

在HTML5之前，网页上的复制功能还需要用到JS+Flash结合的方法。但是随着HTML5推出的一系列API，使得纯JS实现复制功能能够实现。比如这里提到的Clipboard.js。

新版的Clipboard.js使用起来很简单。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>clipboard</title>
    <script src="../../src/clipboard.js-master/dist/clipboard.min.js"></script>
</head>

<body>
    <input id="foo" value="something to copy/cut">
    <button class="btn" data-clipboard-action="cut" data-clipboard-target="#foo">按钮</button>
    <script>
        var clipboard = new Clipboard('.btn');
    </script>
</body>

</html>

首先是选择一个需要点击的元素，可以是<button>或者是别的。

data-clipboard-action属性，属性值为copy或者cut，分别对应的是复制和剪切操作，只有当目标元素是<input>或者是<textarea>时，剪切操作才有效果；否则等同于复制操作。
data-clipboard-target属性，根据css选择器找到元素，当选择结果不唯一时，只会对选到的第一个元素生效。

或者可以不使用data-clipboard-target属性，而可以使用data-clipboard-text属性。

data-clipboard-text属性，使用该属性，能直接将属性值存入剪贴板。

属性添加完整后，在js中对复制按钮进行实例化。

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

参数可以是css选择器，或者dom节点。当选择器选中多个节点时，会对所有的节点生效，即点击各个节点时可以触发各自对应的复制剪切事件。

最后是插件的两个事件

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);
});

3.实际应用

有了好用的插件之后，就可以对最开始的那个页面进行改进了。下载好文档以后，首先查看一下文档结构，每个图标的结构大致如下。

  <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">

            <li>
                <i class="icon iconfont icon-cuowu"></i>
                <div class="name" id="the-error">错误</div>
                <div class="fontclass">.icon-cuowu</div>
            </li>

            <li>
                <i class="icon iconfont icon-erweima"></i>
                <div class="name">二维码</div>
                <div class="fontclass">.icon-erweima</div>
            </li>

            ...

        </ul>
    </div>

我们想要达成的效果是当点击二维码图标的时候，就会复制以下内容。

<i class="icon iconfont icon-erweima"></i>

然后做出了如下的js

$(function () {

    var clipboard = new Clipboard('i.icon');
    clipboard.on('success', function (e) {
        console.log('复制成功');
    });

    var makePrepare = function () {
        $('i.icon').each(function () {
            var $this = $(this);
            var theClass = $this.attr('class');
            var text = '<i class="' + theClass + '"></i>';
            $this.attr('data-clipboard-action', 'copy');
            $this.attr('data-clipboard-text', text);
        })
    }

    makePrepare();

})

最后，实现了想要的效果。点击一下想要的图标，就可以直接粘贴了。

纯JS实现剪贴板复制功能