CODEWITHSUNDEEP
javascripthtmlcopytextareaclipboard
Belgin Fish
Belgin Fish

Reputation: 19857

Copy textarea text to clipboard html / javascript

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

Upvotes: 3

Views: 19626

Answers (7)

Matt Budz
Matt Budz

Reputation: 247

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

Upvotes: 1

MeKoo Solutions
MeKoo Solutions

Reputation: 301

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

Upvotes: 13

Abhishek Sen
Abhishek Sen

Reputation: 358

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.

Upvotes: 1

Denos
Denos

Reputation: 21

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)

Upvotes: 0

Nathan Wheeler
Nathan Wheeler

Reputation: 5932

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

Upvotes: 0

halfdan
halfdan

Reputation: 34284

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.

Upvotes: 1

Purge
Purge

Reputation: 647

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

Upvotes: 1

Related Questions