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

@sakila1012 2018-05-24 02:44:21发表于 sakila1012/blog

写在前面

剪贴板有三种方式:ZeroClipboard.jsClipboard.jsdocument.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