Open sakila1012 opened 6 years ago
剪贴板有三种方式:ZeroClipboard.js,Clipboard.js,document.execCommand。 这三种复制剪贴板各有优势,但均是对 document.execCoomand指令的封装:
document.execCoomand
zeroclipboard 只要是结合 flash 来实现剪贴板功能,但是 flash 目前已经逐渐被各大浏览器抛弃了,而且火狐浏览器默认是不支持剪贴板的,该功能是禁止的。所以 zeroclipboard 在火狐浏览器是无法工作的,在Chrome,IE 浏览器,360 浏览器是可以的。 clipboard 插件,在弹框中存在聚焦的问题 document.execCommand 指令和 clipboard 插件类似,但是它是新兴的 API,在新版本的浏览器中不存在兼容性的问题。
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');
<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); });
当一个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
写在前面
剪贴板有三种方式:ZeroClipboard.js,Clipboard.js,document.execCommand。 这三种复制剪贴板各有优势,但均是对
document.execCoomand
指令的封装:简述
zeroclipboard 只要是结合 flash 来实现剪贴板功能,但是 flash 目前已经逐渐被各大浏览器抛弃了,而且火狐浏览器默认是不支持剪贴板的,该功能是禁止的。所以 zeroclipboard 在火狐浏览器是无法工作的,在Chrome,IE 浏览器,360 浏览器是可以的。 clipboard 插件,在弹框中存在聚焦的问题 document.execCommand 指令和 clipboard 插件类似,但是它是新兴的 API,在新版本的浏览器中不存在兼容性的问题。
用法
zeroclipboard.js
clipboard.js
document.execCommand()
当一个HTML文档切换到设计模式 designMode时,文档对象暴露 execCommand 方法,该方法允许运行命令来操纵可编辑区域的内容。大多数命令影响文档的选择(粗体,斜体等),而其他命令插入新元素(添加链接)或影响整行(缩进)。当使用contentEditable时,调用 execCommand() 将影响当前活动的可编辑元素。
copy 拷贝当前选中内容到剪贴板。启用这个功能的条件因浏览器不同而不同,而且不同时期,其启用条件也不尽相同。使用之前请检查浏览器兼容表,以确定是否可用。
在 Firefox 41 之前,剪贴板功能需要在 user.js 配置文件中启用。参阅 Mozilla 配置概述。命令若未被支持或启用,execCommand 会抛出异常,而不是返回 false。自 Firefox 41 开始,只要是在能够创建窗口的事件回调函数里(半可信脚本里),剪贴板功能都是默认开启的。
参考资料
[1]. document.execCommand