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=/<?=$_GET['id']?>/<?=$_GET['tag']?>]<?=$video->title?>[/URL]

[URL=/<?=$_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

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

• javascript
• html
• copy
• textarea
• clipboard

7 Answers 7

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

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.

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

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.

Modern Solution

document.execCommand('copy') is now deprecated

Instead, we now have the Clipboard API

You can use the writeText() property to accomplish this:

$('button').on('click', () => {
  navigator.clipboard.writeText($('textarea').val()).then(
    () => {
      console.log('clipboard successfully set');
    },
    () => {
      console.error('clipboard write failed');
    }
  );
});

or just simply:

$('button').on('click', () => {
  navigator.clipboard.writeText($('textarea').val());
});

Bonus: This works with disabled textareas and is cross-browser compatible

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

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)