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

Question

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.

Any help would be great :)

Thanks

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

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.

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

Answer 3

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 zeroclipboard for details.

Answer 4

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".

Example of using javascript:

Get html code of the button: function lmc_get_button(cliptext, idLMC)

Update text in the button: function lmc_set_text(idLMC, text)

Answer 5

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.

 //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>

Please see this Jsfiddle for more detail.

Answer 6

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...