52

I'm looking to create a jQuery (or javascript) button that selects everything in a textarea and then copies the text to your clipboard when you clicked on button.

I have found some examples using the focus event. But I'm looking for a button that you actually have to click for the select and copy.

How can i do this work?

Mohammad
  • 21,175
  • 15
  • 55
  • 84
GRU119
  • 1,028
  • 1
  • 14
  • 31

5 Answers5

96

You need to use select() to selecting text of textarea and use execCommand('copy') to coping selected text. Its work in upper version of browsers.

$("button").click(function(){
    $("textarea").select();
    document.execCommand('copy');
});

Also you can do this work without jquery as shown in bottom

document.querySelector("button").onclick = function(){
    document.querySelector("textarea").select();
    document.execCommand('copy');
}


document.querySelector("button").onclick = function(){
  document.querySelector("textarea").select();
  document.execCommand('copy');
};
<button>Select</button>
<br/>
<textarea></textarea>
Mohammad
  • 21,175
  • 15
  • 55
  • 84
  • The newline is not preserved while copying in IE9 – Manoj Mohan Dec 20 '17 at 07:41
  • 3
    It's worth mentioning that if the `textarea` element is marked as `disabled` the above won't work so you need to remove the disabled attribute beforehand. – Maikon Mar 30 '20 at 15:01
  • 1
    If the textarea is hidden by "display: none" the copy doesn't work. Removing the style attribute before copying and adding it afterwards again works fine for me. – NIck Jun 21 '20 at 21:59
  • **NOTE**: This is now deprecated, see the "Modern Solution" below – Chris Barr Jul 27 '23 at 18:45
23

It is possible to make this without using jQuery.

Here's a pure js solution.

function copy() {
  let textarea = document.getElementById("textarea");
  textarea.select();
  document.execCommand("copy");
}
<textarea id="textarea"></textarea>
<br>
<button onclick="copy()">Copy</button>
karoluS
  • 2,980
  • 2
  • 23
  • 44
  • Can you explain why this works using your exact code, but when I put the inside
    , the contents don't copy.     – TenLeftFingers Aug 13 '19 at 15:10
  • 1
    Interesting to note, that if you put `textarea.setSelectedRange(0,99999)` like W3Schools recommends (https://www.w3schools.com/howto/howto_js_copy_clipboard.asp), it doesn't work. – shieldgenerator7 Dec 27 '19 at 06:50
7

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

Matt Budz
  • 193
  • 1
  • 11
2

When your textarea element has disabled for some reason, or if you don't want to visual effect of selected texts, then the solution below works for you.

$("#button_id").click(function(){
    var $temp = $("<textarea></textarea>");
    $("body").append($temp);
    $temp.val($("#textarea_source").val()).select();     <-- #textarea_source: id of textarea source to be copied to the clipboard
    document.execCommand("copy");
    $temp.remove();
})
brucelin
  • 981
  • 2
  • 11
  • 23
0
**Copying text of textarea**
<textarea id="text" class="form-control" rows="21" cols="40" name="text">
                This word has two main meanings. The first has to do with being pleased and satisfied (feeling content) or making someone else feel happy and at peace with things (contenting them). The other meaning has to do with subject matter: the content of a history class might be American history. The content of a math class might be geometry. As long as there's a topic or subject, there's content.
</textarea>
**The following code added to script area**
$("button").click(function(){
      $("textarea").select();
      document.execCommand('copy');
      });
nandhini ram
  • 89
  • 1