记录剪贴板的使用遇到的坑

写在前面

剪贴板有三种方式：ZeroClipboard.js，Clipboard.js，document.execCommand。这三种复制剪贴板各有优势，但均是对 document.execCoomand指令的封装：

简述

zeroclipboard 只要是结合 flash 来实现剪贴板功能，但是 flash 目前已经逐渐被各大浏览器抛弃了，而且火狐浏览器默认是不支持剪贴板的，该功能是禁止的。所以 zeroclipboard 在火狐浏览器是无法工作的，在Chrome，IE 浏览器，360 浏览器是可以的。 clipboard 插件，在弹框中存在聚焦的问题 document.execCommand 指令和 clipboard 插件类似，但是它是新兴的 API，在新版本的浏览器中不存在兼容性的问题。

用法

zeroclipboard.js

 top.ZeroClipboard.setMoviePath(parent.gMain.resourceUrl + '/js/control/clipboard/ZeroClipboard.swf');
var clip = null;
clip = new top.ZeroClipboard.Client();
clip.setHandCursor(true);

clip.addEventListener("load", function (client) {
     jQuery('#copylink').show();
 });

clip.addEventListener("mouseOver", function (client) {
      clip.setText(linkurl);
});

            clip.addEventListener("complete", function (client, text) {
                parent.CC.showMsg(parent.Lang.Disk.copyChainSuccess, true, false, "option"); //复制成功
            });

            clip.glue('copylink', 'copylink');

clipboard.js

<textarea id="bar">hello</textarea>
    <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">Cut</button>
var clipboard = new ClipboardJS('.btn');

clipboard.on('success', function(e) {
    console.log(e);
});

clipboard.on('error', function(e) {
    console.log(e); 
    });

document.execCommand()

当一个HTML文档切换到设计模式 designMode时，文档对象暴露 execCommand 方法，该方法允许运行命令来操纵可编辑区域的内容。大多数命令影响文档的选择（粗体，斜体等），而其他命令插入新元素（添加链接）或影响整行（缩进）。当使用contentEditable时，调用 execCommand() 将影响当前活动的可编辑元素。

copy 拷贝当前选中内容到剪贴板。启用这个功能的条件因浏览器不同而不同，而且不同时期，其启用条件也不尽相同。使用之前请检查浏览器兼容表，以确定是否可用。

    <input type="text" id="inputText" value="测试文本"/>
    <input type="button" id="btn" value="复制"/>
    <textarea rows="4"></textarea>
        <script type="text/javascript">
              var btn = document.getElementById('btn');
              btn.addEventListener('click', function(){
                    var inputText = document.getElementById('inputText');
                    var currentFocus = document.activeElement;
                    inputText.focus();
                    inputText.setSelectionRange(0, inputText.value.length);
                    document.execCommand('copy', true);
                    currentFocus.focus();
             });
          </script>

在 Firefox 41 之前，剪贴板功能需要在 user.js 配置文件中启用。参阅 Mozilla 配置概述。命令若未被支持或启用，execCommand 会抛出异常，而不是返回 false。自 Firefox 41 开始，只要是在能够创建窗口的事件回调函数里（半可信脚本里），剪贴板功能都是默认开启的。

参考资料

[1]. document.execCommand

sakila1012 / blog