将 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 故意不允许在操作系统中使用这种级别的功能。 可以创建一个签名的脚本，这样你的运气会更好，但是......这需要做更多的工作，而且几乎不值得。 大多数人都知道如何复制和粘贴...