我找到了许多复制到剪贴板的解决方案,但它们都带有 Flash,或用于网站端。我正在寻找自动复制到剪贴板的方法,无需闪存,对于用户端,它适用于用户脚本,当然也适用于跨浏览器。
无需 Flash 即可复制到剪贴板
没有 flash,在大多数浏览器中根本不可能。用户的剪贴板是与安全相关的资源,因为它可能包含密码或信用卡号等内容。因此,浏览器不允许 Javascript 访问它是正确的(有些允许它显示用户已确认的警告或签名的 Javascript 代码,但这些都不是跨浏览器的)。
我曾尝试过闪存解决方案,但我也不喜欢。太复杂太慢了。我所做的是创建一个文本区域,将数据放入其中并使用浏览器“CTRL + C”行为。
jQuery javascript 部分:
// catch the "ctrl" combination keydown
$.ctrl = function(key, callback, args) {
$(document).keydown(function(e) {
if(!args) args=[]; // IE barks when args is null
if(e.keyCode == key && e.ctrlKey) {
callback.apply(this, args);
return false;
}
});
};
// put your data on the textarea and select all
var performCopy = function() {
var textArea = $("#textArea1");
textArea.text('PUT THE TEXT TO COPY HERE. CAN BE A FUNCTION.');
textArea[0].focus();
textArea[0].select();
};
// bind CTRL + C
$.ctrl('C'.charCodeAt(0), performCopy);
HTML部分:
<textarea id="textArea1"></textarea>
现在,将您要复制的内容放入“将文本复制到此处”。可以是一个函数。区域。对我来说很好用。您只需要进行一个 CTRL+C 组合。唯一的缺点是您将在您的站点中显示一个丑陋的文本区域。如果您使用 style="display:none" 复制解决方案将不起作用。
clipboard.js刚刚发布,无需 Flash 即可复制到剪贴板
在这里查看它的实际效果 > http://zenorocha.github.io/clipboard.js/#example-action
终于来了!(只要你不支持 Safari 或 IE8... -_- )
您现在可以在没有 Flash 的情况下实际处理剪贴板操作。以下是相关文档:
https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
https://developers.google.com/web/updates/2015/04/cut-and-copy-commands?hl=en
https://msdn.microsoft.com/en-us/library/hh801227%28v=vs.85%29.aspx#copy
在不耐烦地等待剪贴板 API 的Xbrowser 支持时......
这将在Chrome、Firefox、Edge、IE 中完美运行
IE只会提示用户访问剪贴板一次。
Safari浏览器(5.1在写作的时间)不支持execCommand
的copy/cut
/**
* CLIPBOARD
* https://stackoverflow.com/a/33337109/383904
*/
const clip = e => {
e.preventDefault();
const cont = e.target.innerHTML;
const area = document.createElement("textarea");
area.value = e.target.innerHTML; // or use .textContent
document.body.appendChild(area);
area.select();
if(document.execCommand('copy')) console.log("Copied to clipboard");
else prompt("Copy to clipboard:\nSelect, Cmd+C, Enter", cont); // Saf, Other
area.remove();
};
[...document.querySelectorAll(".clip")].forEach(el =>
el.addEventListener("click", clip)
);
<a class="clip" href="#!">Click an item to copy</a><br>
<a class="clip" href="#!"><i>Lorem</i></a><br>
<a class="clip" href="#!"><b>IPSUM</b></a><br>
<textarea placeholder="Paste here to test"></textarea>
所有的浏览器(Firefox的除外,它能够只处理MIME类型"plain/text"
,据我测试过)都没有实现的剪贴板API。即,尝试使用 Chrome 读取剪贴板事件
var clipboardEvent = new ClipboardEvent("copy", {
dataType: "plain/text",
data: "Text to be sent to clipboard"
});
抛出:未捕获的类型错误:非法的构造函数
浏览器和剪贴板之间发生的令人难以置信的混乱的最佳资源可以在这里看到(caniuse.com)(→ 按照“注释”下的评论)。
MDN 表示对所有浏览器的基本支持都是“(是)”,这是不准确的,因为人们期望至少 API 能够正常工作。