不使用 Flash 复制到剪贴板

Posted

技术标签:

【中文标题】不使用 Flash 复制到剪贴板【英文标题】:Copy to clipboard without Flash 【发布时间】:2011-09-15 08:47:18 【问题描述】:

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

【问题讨论】:

没有找到,一直在找同样的东西。确实想使用 Flash,因此在创建之前删除了此功能。 重复***.com/questions/400212/… 不使用 FLASH 我怀疑你可以在各种浏览器中完成它。但是有具体的解决方案可以帮助您获得解决方案zeroclipboard Rakesh - 您的“具体解决方案”基于 Flash。它不适用于我使用的任何浏览器。 ***.com/questions/400212/… 中的@wizztjh 方法用于站点端而不是用户端@Rakesh zeroclipboard 很好,但我想找到完全没有 Flash 的方法 【参考方案1】:

不耐烦地等待 Xbrowser 支持Clipboard API...


这将在 Chrome、Firefox、Edge、IE 中完美运行

IE 只会提示用户一次访问剪贴板。Safari(撰写本文时为 5.1)does not support execCommand for copy/cut

/**
 * CLIPBOARD
 * https://***.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"未实现Clipboard API。即,尝试使用

读取 Chrome 中的剪贴板事件
var clipboardEvent = new ClipboardEvent("copy", 
        dataType: "plain/text",
        data: "Text to be sent to clipboard"
);

抛出:未捕获的类型错误:非法构造函数

浏览器和剪贴板中发生的令人难以置信的混乱的最佳资源可见here (caniuse.com)(→ 关注“Notes”下的 cmets)。 MDN 说对所有浏览器的基本支持是"(YES)",这是不准确的,因为人们希望至少 API 能够正常工作。

【讨论】:

【参考方案2】:

document.execCommand('copy') 会做你想做的事。但是在这个线程中没有直接可用的例子没有 cruft,所以这里是:

var textNode = document.querySelector('p').firstChild
var range = document.createRange()
var sel = window.getSelection()

range.setStart(textNode, 0)
range.setEndAfter(textNode)
sel.removeAllRanges()
sel.addRange(range)
document.execCommand('copy')

【讨论】:

【参考方案3】:

clipboard.js 刚刚发布,无需 Flash 即可复制到剪贴板

在这里查看它的实际应用 > http://zenorocha.github.io/clipboard.js/#example-action

【讨论】:

【参考方案4】:

终于来了!(只要你不支持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

【讨论】:

【参考方案5】:

您可以使用 HTML 页面本地的剪贴板。这允许您在 HTML 页面内复制/剪切/粘贴内容,但不能从/向第三方应用程序或在两个 HTML 页面之间复制/剪切/粘贴内容。

这是您可以编写自定义函数来执行此操作的方法(在 chrome 和 firefox 中测试):

这里是 FIDDLE,它演示了如何做到这一点。

我还将把小提琴贴在这里以供参考。


HTML

<p id="textToCopy">This is the text to be copied</p>
<input id="inputNode" type="text" placeholder="Copied text will be pasted here" /> <br/>

<a href="#" onclick="cb.copy()">copy</a>
<a href="#" onclick="cb.cut()">cut</a>
<a href="#" onclick="cb.paste()">paste</a>

JS

function Clipboard() 
    /* Here we're hardcoding the range of the copy
    and paste. Change to achieve desire behavior. You can
    get the range for a user selection using
    window.getSelection or document.selection on Opera*/
    this.oRange = document.createRange();
    var textNode = document.getElementById("textToCopy");
    var inputNode = document.getElementById("inputNode");
    this.oRange.setStart(textNode,0);
    this.oRange.setEndAfter(textNode);
    /* --------------------------------- */


Clipboard.prototype.copy = function() 
    this.oFragment= this.oRange.cloneContents();
;

Clipboard.prototype.cut = function() 
    this.oFragment = this.oRange.extractContents();
;

Clipboard.prototype.paste = function() 
    var cloneFragment=this.oFragment.cloneNode(true)
    inputNode.value = cloneFragment.textContent;
;

window.cb = new Clipboard();

【讨论】:

嘿 mtBrona。有没有办法为这个附加一些jsfiddle?似乎无法激活它 我们可以在这里传递字符串来代替元素 只有当你在同一个 window 中时才有效。它不是操作系统和其他浏览器选项卡可用的实际剪贴板。此外,使用select() 可以轻松完成选择,而不仅仅是window.getSelection()【参考方案6】:

我尝试过 flash 解决方案,但我也不喜欢。太复杂也太慢了。我所做的是创建一个文本区域,将数据放入其中并使用浏览器“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部分:&lt;textarea id="textArea1"&gt;&lt;/textarea&gt;

现在,将您要复制的内容放入“将文本复制到此处”。可以是一个功能。区域。 对我来说很好。你只需要做一个 CTRL+C 组合。唯一的缺点是您的站点中将显示一个丑陋的文本区域。如果您使用 style="display:none" 复制解决方案将不起作用。

【讨论】:

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

没有办法,你必须使用闪光灯。有一个名为 jquery.copy 的 JQuery 插件,它通过使用 flash (swf) 文件提供跨浏览器复制和粘贴。这类似于我博客上的语法高亮显示的工作原理。

引用 jquery.copy.js 文件后,将数据推送到剪贴板所需要做的就是运行以下命令:

$.copy("some text to copy");

又好又简单;)

【讨论】:

链接已损坏(文件不再可供下载)【参考方案8】:

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

【讨论】:

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

以上是关于不使用 Flash 复制到剪贴板的主要内容,如果未能解决你的问题,请参考以下文章

复制到 jquery/javascript 中的剪贴板,没有 ipad / iphone 的 flash

使用 execCommand (Javascript) 将隐藏文本复制到剪贴板

HTML5 替代基于 Flash 的 ZeroClipboard 以将数据安全复制到剪贴板?

JS pc端和移动端共同实现复制到剪贴板功能实现

js插件zClip实现复制到剪贴板功能

移动端实现复制到剪贴板