将 textarea 文本复制到剪贴板 html / javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3739330/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Copy textarea text to clipboard html / javascript
提问by Belgin Fish
hey, i know there's lots of tutorials out there but none seem to be working for me.
嘿，我知道那里有很多教程，但似乎没有一个对我有用。
I have this :
我有这个 ：
<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>
Now all i want is a simple button, that when clicked copies the text in the textarea to the users clipboard.
现在我想要的只是一个简单的按钮，单击该按钮时会将 textarea 中的文本复制到用户剪贴板。
Any help would be great :)
任何帮助都会很棒:)
Thanks
谢谢
采纳答案by halfdan
Sadly there's no all in one solution for this. Browsers other than IE doesnt allow copying to clipboard. I found I nice solution recently which uses Flash (for all browsers but IE) and JavaScript for IE to copy text to the clipboard. See zeroclipboardfor details.
遗憾的是，对此没有一劳永逸的解决方案。IE 以外的浏览器不允许复制到剪贴板。我最近发现了一个很好的解决方案，它使用 Flash（适用于除 IE 之外的所有浏览器）和 JavaScript for IE 将文本复制到剪贴板。有关详细信息，请参阅zeroclipboard。
回答by MeKoo Solutions
<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>
回答by Purge
Check out this page. It doesn't say anything about browser compatibility, but could be worth checking out! It gives a javascript copy to clipboard example, and the HTML associated with it.
看看这个页面。它没有说明浏览器兼容性，但值得一试！它为剪贴板示例提供了一个 javascript 副本，以及与之关联的 HTML。
http://www.geekpedia.com/tutorial126_Clipboard-cut-copy-and-paste-with-JavaScript.html
http://www.geekpedia.com/tutorial126_Clipboard-cut-copy-and-paste-with-JavaScript.html
回答by Nathan Wheeler
Browser compatibility using any script is shoddy at best. JavaScript intentionally doesn't natively allow this level of functionality with the operating system. It is possible to create a signed script that you'll have better luck with, but... that's a lot more work and hardly worth it. Most people know how to copy and paste...
使用任何脚本的浏览器兼容性充其量是劣质的。JavaScript 故意不允许在操作系统中使用这种级别的功能。可以创建一个签名的脚本，这样您的运气会更好，但是……这需要做更多的工作，而且几乎不值得。大多数人都知道如何复制和粘贴...
回答by Denos
Unfortunately javascript does not have a universal way. Currently, the use of flash & javascript most universal way. Look on a LMCButton- a small animated flash button (4 kb) for "Copy to clipboard".
不幸的是，javascript 没有通用的方式。目前，使用flash & javascript 最为普遍的方式。查看LMCButton- 一个用于“复制到剪贴板”的小型动画 Flash 按钮 (4 kb)。
Example of using javascript:
使用 javascript 的示例：
Get html code of the button: function lmc_get_button(cliptext, idLMC)
获取按钮的html代码：function lmc_get_button(cliptext, idLMC)
Update text in the button: function lmc_set_text(idLMC, text)
更新按钮中的文本：function lmc_set_text(idLMC, text)
回答by Abhishek Sen
The solution is purely on Javascript. i don't know about its compatibility with other browsers. For chrome its working, I am adding the code snippet.
解决方案纯粹是在 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> </p>
<div id="p1" class="mas" style="top:0px;position:absolute;opacity:0;" ></div>
<button onclick="copyToClipboard('#p1')">Copy P1</button>Please see this Jsfiddlefor more detail.
有关更多详细信息，请参阅此Jsfiddle。
