Copying text of textarea in clipboard when button is clicked

Question

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?

Answer 1

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>

Answer 2

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>

Answer 3

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();
})