将 textarea 文本复制到剪贴板 html / javascript答案

【问题标题】：Copy textarea text to clipboard html / javascript将 textarea 文本复制到剪贴板 html / javascript
【发布时间】：2010-09-17 21:54:13
【问题描述】：

嘿，我知道那里有很多教程，但似乎没有一个适合我。

我有这个：

<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 中的文本复制到用户剪贴板。

任何帮助都会很棒:)

谢谢

【问题讨论】：

标签： javascript html copy textarea clipboard

【解决方案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>

【讨论】：

【解决方案2】：

遗憾的是，没有针对此问题的一站式解决方案。 IE 以外的浏览器不允许复制到剪贴板。我最近发现了一个不错的解决方案，它使用 Flash（适用于除 IE 之外的所有浏览器）和适用于 IE 的 JavaScript 将文本复制到剪贴板。详情请见zeroclipboard。

【讨论】：

这已经过时了，请参阅下面的 MeKoo 解决方案的答案以获取更新的答案。

【解决方案3】：

查看此页面。它没有说明浏览器兼容性，但值得一试！它为剪贴板示例提供了一个 javascript 副本，以及与之关联的 HTML。

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

【讨论】：

cmets 建议这只是 IE。

【解决方案4】：

使用任何脚本的浏览器兼容性充其量只是粗制滥造。 JavaScript 故意不允许操作系统具有这种级别的功能。可以创建一个签名脚本，你会得到更好的运气，但是......这是更多的工作，几乎不值得。大多数人都知道如何复制和粘贴...

【讨论】：

【解决方案5】：

不幸的是，javascript 没有通用的方法。目前，使用flash & javascript 最普遍的方式。查看LMCButton - 一个用于“复制到剪贴板”的小动画 Flash 按钮 (4 kb)。

使用javascript的示例：

获取按钮的html代码：function lmc_get_button(cliptext, idLMC)

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

【讨论】：

【解决方案6】：

解决方案完全基于 Javascript。我不知道它与其他浏览器的兼容性。对于 chrome 它的工作，我添加了代码 sn-p。

//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了解更多详情。

【讨论】：