將 textarea 文本復制到剪貼板 html / javascript

Question

嘿，我知道那里有很多教程，但似乎沒有一個對我有用。

我有這個：

<textarea name="forum_link" type="text" style="width:630px; height:90px;">
[URL=http://www.site.net/video/<?=$_GET['id']?>/<?=$_GET['tag']?>]<?=$video->title?>[/URL]

[URL=http://www.site.net/video/<?=$_GET['id']?>/<?=$_GET['tag']?>][IMG]<?=$video->thumbnailURL?>[/IMG][/URL]
</textarea>

現在我想要的只是一個簡單的按鈕，單擊該按鈕時會將 textarea 中的文本復制到用戶剪貼板。

任何幫助都會很棒:)

謝謝

Answer 1

<textarea id="html" name="html">Some text</textarea>
<input type="button" value="Refresh" onclick="copy_to_clipboard('html');">

<script>
function copy_to_clipboard(id)
{
    document.getElementById(id).select();
    document.execCommand('copy');
}
</script>

Answer 2

看看這個頁面。 它沒有說明瀏覽器兼容性，但值得一試！ 它為剪貼板示例提供了一個 javascript 副本，以及與之關聯的 HTML。

http://www.geekpedia.com/tutorial126_Clipboard-cut-copy-and-paste-with-JavaScript.html

Answer 3

遺憾的是，對此沒有一勞永逸的解決方案。 IE 以外的瀏覽器不允許復制到剪貼板。 我最近發現了一個很好的解決方案，它使用 Flash（適用於除 IE 之外的所有瀏覽器）和 JavaScript for IE 將文本復制到剪貼板。 有關詳細信息，請參閱zeroclipboard 。

Answer 4

不幸的是，javascript 沒有通用的方式。 目前，使用flash & javascript 最普遍的方式。 查看LMCButton - 一個用於“復制到剪貼板”的小型動畫 Flash 按鈕 (4 kb)。

使用 javascript 的示例：

獲取按鈕的html代碼： function lmc_get_button(cliptext, idLMC)

更新按鈕中的文本： function lmc_set_text(idLMC, text)

Answer 5

解決方案純粹是基於 Javascript。 我不知道它與其他瀏覽器的兼容性。 對於 chrome 的工作，我添加了代碼片段。

 //all text written(inside text area), is copied and shown inside the div with class "mas" //you can't see it, as it is hidden(opacity is 0) $('#content:not(.focus)').keyup(function(){ var value = $(this).val(); var contentAttr = $(this).attr('name'); $('.'+contentAttr+'').html(value.replace(/\\r?\\n/g,'<br/>')); }) //below code can copy text inside a div. div id should be identical with button oclick id copyToClipboard = function (element) { var $temp = $("<input />"); $("body").append($temp); $temp.val($(element).text()).select(); var result = false; try { result = document.execCommand("copy"); } catch (err) { console.log("Copy error: " + err); } $temp.remove(); return result; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <textarea name="mas" rows="6" id="content"></textarea> <p>&nbsp;</p> <div id="p1" class="mas" style="top:0px;position:absolute;opacity:0;" ></div> <button onclick="copyToClipboard('#p1')">Copy P1</button>

有關更多詳細信息，請參閱此Jsfiddle 。

Answer 6

使用任何腳本的瀏覽器兼容性充其量都是劣質的。 JavaScript 故意不允許在操作系統中使用這種級別的功能。 可以創建一個簽名的腳本，這樣你的運氣會更好，但是......這需要做更多的工作，而且幾乎不值得。 大多數人都知道如何復制和粘貼...