Copy on Button Click from Text Area and Alert (JavaScipt/jQuery)

We are going to show an example with JavaScript and jQuery where you can copy text from a text area and also alert the users that text has been copied. Let’s see how it is done.

HTML Code to Include

Let’s create our Text Area and the Button first

<textarea id="output"></textarea>
<button id="copy">Copy Text</button>

JavaScript to Add

document.getElementById("copy").onclick = function(){
    document.getElementById("output").select();
    document.execCommand("copy");
    alert("copied");

};

Or use jQuery (use only JavaScript or jQuery – you don’t need to add both)

Make sure you have jQuery reference added to your HTML file, else jQuery code is not going to work.

$('#copy').click(function(){
    $('#output').select();
    document.execCommand('copy');
    alert('copied');

});

Download Complete Code

Preview

Here is the Preview how it’s going to look like. I have not added any CSS styling, so you can style the way you like.