复制到剪贴板而不使用Flash

我发现了很多复制到剪贴板的解决方案，但是它们要么全部使用Flash，要么用于网站。我正在寻找自动复制到剪贴板的方法，不带Flash，并且对于用户端，它适用于用户脚本，当然也适用于跨浏览器。

如果没有Flash，则在大多数浏览器中根本无法实现。用户的剪贴板是与安全性相关的资源，因为它可能包含密码或信用卡号之类的内容。因此，浏览器正确地不允许Javascript访问它（有些浏览器允许它显示警告，表明用户已经确认或带有已签名的Javascript代码，但没有一个是跨浏览器的）。

我曾经尝试过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部分：
<textarea id="textArea1"></textarea>

现在，将您要复制的内容放在“在此处复制文本”。可以是一个功能。区。我的工作对我来说很好。您只需要组合一个CTRL + C。唯一的缺点是您的站点上将显示一个难看的文本区域。如果使用style =“ display：none”，则复制解决方案将无法使用。

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

在这里查看实际效果> http://zenorocha.github.io/clipboard.js/#example-action

终于到了！（只要您不支持Safari或IE8 ... -_-）

现在，您实际上可以在没有Flash的情况下处理剪贴板操作。以下是相关文档：

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

https://developers.google.com/web/updates/2015/04/cut-and-copy-commands?hl=zh_CN

https://msdn.microsoft.com/zh-CN/library/hh801227%28v=vs.85%29.aspx#copy

^{在不耐烦地等待剪贴板API的 Xbrowser支持时...}

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"
});

抛出：未捕获的TypeError：非法的构造函数

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

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

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

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

引用jquery.copy.js文件后，只需执行以下操作即可将数据推入剪贴板：

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

好，易于 ;）