複製到剪貼板沒有Flash

Question

我發現很多解決方案複製到剪貼板，但他們都要麼使用閃光燈，或用於網站的一面。 我正在尋找方法複製到剪貼板自動，沒有閃光和用戶端，它的用戶腳本，當然跨瀏覽器。

Answer 1

不用閃光燈，這根本就不是在大多數瀏覽器成爲可能。用戶的剪貼板是一個安全相關的資源，因爲它可能包含密碼或信用卡號等內容。因此，瀏覽器正確地不允許Javascript訪問它（有些允許它顯示用戶已經確認的警告，或者帶有簽名的Javascript代碼，但沒有一個是跨瀏覽器的）。

Answer 2

沒有辦法解決，你必須使用閃光燈。有一個名爲jquery.copy的JQuery插件，它使用flash（swf）文件提供跨瀏覽器的複製和粘貼。這與我博客上的語法突出顯示器的工作原理類似。

一旦你引用jquery.copy.js文件中的所有你需要做的將數據推到剪貼板中運行以下命令：

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

尼斯和容易;）

Answer 3

可以使用剪貼板本地到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 4

我tryed閃存解決方案，我不喜歡太。太複雜，太慢。我所做的就是創建一個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>

現在，把你想複製「把要複製的文本在這裏。可以是功能。'區。 適合我的作品。你只需要做一個CTRL + C組合。唯一的缺點是你將在你的網站上顯示一個醜陋的textarea。如果您使用style =「display：none」，則複製解決方案將不起作用。

Answer 5

終於來了！（只要你不支持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 6

clipboard.js剛剛發佈複製到剪貼板，而不需要安裝Flash

的

看到它在行動這裏>http://zenorocha.github.io/clipboard.js/#example-action

Answer 7

^{雖然不耐煩地等待Xbrowser中支持Clipboard API的...}

---

這將在 的Chrome，火狐，邊緣做工精美，IE

IE只會提示用戶一次訪問剪貼板。
Safari瀏覽器（5.1在寫作的時候）does not support execCommand for copy/cut

function clip(e) { 
 
    e.preventDefault(); 
 
    var cont = $(this).html(), // Or use a custom source Element 
 
     $txa = $("<textarea />",{val:cont,css:{position:"fixed"}}).appendTo("body").select(), 
 
     $msg = $("#clip-popup"); 
 
    if(document.execCommand('copy')) $msg.show().delay(1500).fadeOut(); // CH, FF, Edge, IE 
 
    else prompt("Copy to clipboard:\nSelect, Cmd+C, Enter", cont); // Saf, Other 
 
    $txa.remove(); 
 
} 
 

 
$(".clip").on("click", clip);

a{cursor: pointer; color: #F00BA4;} 
 
textarea{width:70%; height:100px;} 
 

 
/* CLIP - MESSAGE POPUP */ 
 
#clip-popup{ 
 
    pointer-events: none; 
 
    position: fixed; z-index:9999; display:none; 
 
    left: 50%; top: 50%; 
 
    transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); 
 
    font: 2em/1 sans-serif; color: #1CEA6E; 
 
    opacity: 0.9; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="clip-popup">Copied to clipboard!</div> 
 
Click an item to copy: <br> 
 
<a class="clip">Lorem</a><br> 
 
<a class="clip"><i>ipsum</i></a><br> 
 
<a class="clip"><b>dolor</b></a><br> 
 
<textarea placeholder="Paste here (or anywhere) to test"></textarea>

所有的瀏覽器（Firefox的除外，它能夠只處理MIME類型"plain/text"據我測試過）已未執行Clipboard API。即，試圖讀取使用

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

在Chrome中剪貼板事件拋出：遺漏的類型錯誤：非法構造

的令人難以置信的混亂多數民衆贊成瀏覽器和剪貼板中發生的最好的資源可以看到​​（→請參閱「註釋」下的註釋）。
MDN表示基本支持是「（YES）」對於所有瀏覽器而言都是不準確的，因爲至少可以期望API工作。

Answer 8

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