How To Copy to Clipboard Using Jquery

As of 2016, most browsers will allow you to copy text to the clipboard, as most browsers have the ability to copy the selected text on the Clipboard using document.execCommand ("copy").

In This Article, We Will Discuss How to Copy Content To Clipboard Using Jquery And Html.

Methods For Copy Text To Clipboard With Jquery.

  • Create a temporary hidden Input/Textarea field.
  • Copy the content of the element to the Input/Textarea field using jquery or javascript.
  • Select the value of the Input/Textarea field.
  • Execute the command to copy to clipboard: document.execCommand("copy").
  • Remove the temporary Input/Textarea field with jquery or javascript

Code For Copy Content To Clipboard.

Html Code

<p id='data'>
    This Is Content For Copy To Clipboard
</p>
<button onclick="CopyToClipboard()"> Copy </button>

Jquery Code

function CopyToClipboard() { 
       var data = $('#data').html();
       var textarea = $("<textarea>"); 
       $("body").append(textarea);
       textarea.val(data).select();
       document.execCommand("copy");
       textarea.remove();
   }

Thank You