Question

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

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即可复制到剪贴板

在此处查看此操作＆gt; 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）does not support execCommand for 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"）未实现 Clipboard API。即，尝试使用

在Chrome中读取剪贴板事件

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

throws：未捕获TypeError：非法构造函数

可以看到浏览器和剪贴板中发生的令人难以置信的混乱的最佳资源here (caniuse.com)（→按照“Notes”下的评论进行操作）。
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");

很好，很容易;）

复制到没有Flash的剪贴板

8 个答案: