无需 Flash 即可复制到剪贴板

IT技术 javascript jquery clipboard
2021-02-28 12:49:52

我找到了许多复制到剪贴板的解决方案,但它们都带有 Flash,或用于网站端。我正在寻找自动复制到剪贴板的方法,无需闪存,对于用户端,它适用于用户脚本,当然也适用于跨浏览器。

6个回答

没有 flash,在大多数浏览器中根本不可能。用户的剪贴板是与安全相关的资源,因为它可能包含密码或信用卡号等内容。因此,浏览器不允许 Javascript 访问它是正确的(有些允许它显示用户已确认的警告或签名的 Javascript 代码,但这些都不是跨浏览器的)。

虽然这个答案在 2011 年是正确的,但浏览器在消灭 Flash 的斗争中已经取得了长足的进步。请看我下面的回答。
2021-04-28 12:49:52
@EricGrange:因为早在 1990 年代中期,Netscape 的某个人就决定出于性能原因,浏览器插件将是本机二进制文件,因此几乎可以做任何事情。那时的网络世界是一个非常简单的地方,安全问题并不那么重要。
2021-04-29 12:49:52
但是,为什么允许它通过涉及零用户通知和反馈的隐藏flash灯发生呢?
2021-05-01 12:49:52
所以也许页面不应该从剪贴板读取,但为什么不写入呢?=/
2021-05-14 12:49:52

我曾尝试过闪存解决方案,但我也不喜欢。太复杂太慢了。我所做的是创建一个文本区域,将数据放入其中并使用浏览器“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" 复制解决方案将不起作用。

当然,这就是想法。为您制作浏览器副本。这里有一个类似的解决方案:knockoutjs.com/examples/clickCounter.html当您双击它们时,它们会通过带有内容的 javascript 创建一个文本区域。
2021-04-27 12:49:52
像这样。当你不能隐藏(出于任何原因)一个你不需要看到的元素时,你总是可以把它放在远离开始的地方,比如 padding-bottom: -1000。
2021-04-29 12:49:52
@GabLeRoux safari 中的复制功能仅在选择文本时启用。这在以前确实有效,但最近对 safari 的更新已停止它。似乎在调用 key down 事件之后选择文本不再在该浏览器中剪切它。然而,在 chrome 中仍然可以正常工作。哦,好吧,可能不得不回退到只为该浏览器使用 Flash....
2021-05-10 12:49:52
这似乎只是将 Ctrl+C 的功能绑定到一个 javascript 函数,而不是将数据放在操作系统剪贴板中。
2021-05-11 12:49:52
在 osx 上对我不起作用,所以我添加e.metaKey了 keydown 比较,但由于某种原因,没有触发复制操作。看到这个小提琴:jsfiddle.net/gableroux/gta67/1
2021-05-16 12:49:52

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在写作的时间)不支持execCommandcopy/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 能够正常工作。