用javascript復制到剪貼板不起作用

Question

我在pre標簽中有json數據

以下是我使用過的JS

瀏覽器控制台中沒有錯誤。 但是當我將內容粘貼到pre標簽中時，不會粘貼

 var emailLink = document.querySelector('#filecontent1'); var range = document.createRange(); range.selectNode(emailLink); window.getSelection().addRange(range); try { var successful = document.execCommand('copy'); var msg = successful ? 'successful' : 'unsuccessful'; console.log('Copy email command was ' + msg); } catch (err) { console.log('Oops, unable to copy'); } window.getSelection().removeAllRanges(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <pre id="filecontent1"> { "a":"string a", "b":"string b" } </pre> 

Answer 1

為了防止濫用，大多數瀏覽器僅允許您在用戶啟動的事件中修改用戶的剪貼板：

document.execCommand（'cut'/'copy'）被拒絕，因為沒有從運行時間很短的用戶生成的事件處理程序內部調用它。

（請注意，它並沒有失敗拋出一個錯誤，瀏覽器只是返回false從將execCommand;火狐也顯示控制台警告消息。）

您的上述代碼仍然失敗（至少在Safari，Chrome和FF中，這是我測試過的），因為它是通過程序啟動的。 但是，如果包裝在click事件中，則可以在那些瀏覽器中使用：

 var testCopy = function() { var emailLink = document.querySelector('#filecontent1'); var range = document.createRange(); range.selectNode(emailLink); window.getSelection().addRange(range); try { var successful = document.execCommand('copy'); var msg = successful ? 'successful' : 'unsuccessful'; console.log('Copy email command was ' + msg); } catch (err) { console.log('Oops, unable to copy'); } window.getSelection().removeAllRanges(); } testCopy(); // this will fail, because it's not user-initiated document.getElementById("go").onclick = testCopy; // this will work 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <pre id="filecontent1"> { "a":"string a", "b":"string b" } </pre> <button id="go">Copy</button>