復制到沒有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");

好，易於 ;）