复制到没有Flash的剪贴板

Question

我找到了许多复制到剪贴板的解决方案，但它们都可以使用闪存或网站方面。 我正在寻找方法复制到剪贴板自动，没有闪存和用户方面，它是用户脚本，当然是跨浏览器。

Answer 1

没有闪存，在大多数浏览器中根本不可能。 用户的剪贴板是一种与安全相关的资源，因为它可能包含密码或信用卡号等内容。 因此，浏览器正确地不允许Javascript访问它（有些允许它显示用户已经确认的警告，或者使用签名的Javascript代码，但没有一个是跨浏览器）。

Answer 2

我曾尝试过闪存解决方案而且我也不喜欢。 太复杂太慢了。 我所做的是创建一个textarea，将数据放入其中并使用浏览器“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>

现在，把你要复制的东西放在'PUT THE TEXT TO COPY HERE中。 可以成为一种功能。 区域。 对我来说工作正常。 你只需要制作一个CTRL + C组合。 唯一的缺点是你将在你的网站上显示一个丑陋的textarea。 如果使用style =“display：none”，则复制解决方案将不起作用。

Answer 3

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

请在此处查看> http://zenorocha.github.io/clipboard.js/#example-action

Answer 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

Answer 5

^{在不耐烦地等待 Xbrowser对Clipboard API的支持时......}

---

这将在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> 

所有浏览器（除了我只测试过只能处理mime类型"plain/text" Firefox）都没有实现 Clipboard API 。 即，尝试使用Chrome浏览器中的剪贴板事件

 var clipboardEvent = new ClipboardEvent("copy", { dataType: "plain/text", data: "Text to be sent to clipboard" }); 

throws： Uncaught TypeError：非法构造函数

浏览器和剪贴板之间发生的令人难以置信的混乱的最佳资源可以在这里看到（caniuse.com） （→按照“注释”下的注释 ）。
MDN表示，所有浏览器的基本支持都是“（YES）” ，这是不准确的，因为人们至少会期望API能够正常工作。

Answer 6

您可以使用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();

Answer 7

document.execCommand('copy')会做你想要的。 但是这个帖子中没有直接可用的例子没有瑕疵，所以这里是：

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')

Answer 8

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

一旦引用了jquery.copy.js文件，您只需执行以下操作即可将数据推送到剪贴板：

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

好，易于 ;）