Html HTML5 替代基于 Flash 的 ZeroClipboard 以安全地将数据复制到剪贴板？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10729570/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 alternative to flash-based ZeroClipboard for safe copying of data to clipboard?
提问by jfriend00
With flash on the way out in many environments (iPhone, Android, IE10, etc...), is there any new solution forthcoming in any browsers that will allow a safe copy of information to the clipboard without flash installed?
随着 Flash 在许多环境（iPhone、Android、IE10 等）中的淘汰，是否有任何浏览器即将推出新的解决方案，允许在不安装 Flash 的情况下将信息安全复制到剪贴板？
I've been using ZeroClipboardso far, but I'm worried about more viewers that don't have flash and this functionality is going to be broken and I'd love to not depend on Flash whenever possible.
到目前为止，我一直在使用ZeroClipboard，但我担心更多没有 Flash 的观众，这个功能会被破坏，我希望尽可能不依赖 Flash。
回答by Beau Bouchard
The reasoning is that automatic copying to clipboard can be very dangerous, thus most browsers (except IE)* make it difficult unless you use flash.
原因是自动复制到剪贴板可能非常危险，因此除非您使用 Flash，否则大多数浏览器（IE 除外）* 都会使其变得困难。
Much like your ZeroClipboard, there is Clipboard LMCButtonwhich also uses a small flash script running in the background.
很像您的ZeroClipboard，还有Clipboard LMCButton，它也使用在后台运行的小型 flash 脚本。
A common solution would be to do this:
一个常见的解决方案是这样做：
function copyToClipboard (text) {
window.prompt ("Copy to clipboard: Ctrl+C, Enter", text);
}
Which I found from Jarek Milewski when some one else asked the question here
当其他人在这里问这个问题时，我从 Jarek Milewski 那里发现的
*Yes I found one solution for IE, however does not work in most modern browsers, check here.
*是的，我为 IE 找到了一种解决方案，但是在大多数现代浏览器中都不起作用，请在此处查看。
回答by Baraa
I know this answer is coming a bit late, but there is now a new modern alternative to ZeroClipboard (which is Flash based). Clipboard.jsis a 2kB pure JavaScriptalternative that has no dependencies.
我知道这个答案来的有点晚了，但是现在有一个新的现代替代 ZeroClipboard（基于 Flash）。Clipboard.js是一个2kB 的纯 JavaScript替代品，没有依赖项。
回答by Triforcey
I have created a pure JavaScript solution called clip-j. Hereit is. Basically what it does is it takes advantage of document.execCommand('copy');with a few other commands that make it so you don't see anything. Here's the code:
我创建了一个名为 clip-j 的纯 JavaScript 解决方案。在这里。基本上它的作用是利用document.execCommand('copy');其他一些命令来制作它，因此您看不到任何东西。这是代码：
function clip(text) {
var copyElement = document.createElement('input');
copyElement.setAttribute('type', 'text');
copyElement.setAttribute('value', text);
copyElement = document.body.appendChild(copyElement);
copyElement.select();
document.execCommand('copy');
copyElement.remove();
}
回答by Thayne
You can look at this blog postfor an in-depth discussion of how to work with the clipboard in HTML5. Unfortunately, you still can't portably copy to the clipboard on click. However, for chrome and firefox you can create a browser extension that can give your site permission to access the clipboard, and I believe IE will let you copy to the clipboard, but will prompt the user to grant permission.
您可以查看这篇博客文章，深入讨论如何在 HTML5 中使用剪贴板。不幸的是，您仍然无法在单击时便携地复制到剪贴板。但是，对于 chrome 和 firefox，您可以创建一个浏览器扩展程序，允许您的站点访问剪贴板，我相信 IE 会让您复制到剪贴板，但会提示用户授予权限。
Update:
更新：
According to this: https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommandFirefox 41+, Chrome 42+, and IE 9+ support the copy command with execCommand. For firefox and chrome it will only work if triggered by a user action such as a click, and for IE it will give the user a warning dialog asking them for permission to copy to the clipboard.
根据这个：https: //developer.mozilla.org/en-US/docs/Web/API/Document/execCommandFirefox 41+、Chrome 42+ 和 IE 9+ 支持带有 execCommand 的复制命令。对于 firefox 和 chrome，它仅在由用户操作（例如单击）触发时才起作用，对于 IE，它将为用户提供一个警告对话框，要求他们授予复制到剪贴板的权限。
回答by Geektracker
To use the execCommand, you must first select() something on the page, so you do not just copy whatever was last put into the clipboard. With this function, I pass the id of the input textbox into the function and select() it, then perform the copy command. No need to add listeners or further complicate your code. The document.execCommand() returns false if not enabled or supported, thus you can use the window.prompt as the backup method.
要使用 execCommand，您必须首先 select() 页面上的某些内容，因此您不只是复制上次放入剪贴板的内容。使用这个函数，我将输入文本框的 id 传递给函数并选择（）它，然后执行复制命令。无需添加侦听器或进一步复杂化您的代码。如果未启用或不支持 document.execCommand() 返回 false，因此您可以使用 window.prompt 作为备份方法。
function copyToClipboard(id) {
var blnCopied;
document.getElementById(id).select();
blnCopied = document.execCommand("copy", false, null);
if (blnCopied)
alert('Link copied to clipboard');
else
window.prompt ("Copy to clipboard: Ctrl+C, Enter", jQuery("#"+id).val());
}
Use a standard "a" anchor tag with an onclick="copyToClipboard('some_id')"
使用带有 onclick="copyToClipboard('some_id')" 的标准“a”锚标记
回答by Dmytro
There are great answers to this question, and I chose to use this snippet:
这个问题有很好的答案，我选择使用这个片段：
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
However, if there's bootstrap-select on your page, the $temp.val($(element).text()).select()line will throw an error:
但是，如果您的页面上有 bootstrap-select，该$temp.val($(element).text()).select()行将抛出错误：
Widget can only work on select elements
小部件只能在选择元素上工作
You can use .trigger('select')instead, as stated in the jQuery documentation for .select(), like this:
您可以.trigger('select')改为使用.select()的jQuery 文档中所述，如下所示：
$temp.val($(element).val()).trigger('select');
