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

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