Copying text of textarea in clipboard when button is clicked

GRU119 picture GRU119 · Jun 6, 2016 · Viewed 50.8k times · Source

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

Mohammad picture Mohammad · Jun 6, 2016

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>