copy to clipboard jquery

Copy to Clipboard with jQuery#

Copying text to clipboard is a common requirement in web development. jQuery can make this process easier by providing a simple function to copy text to clipboard without any hassle.

Using jQuery Clipboard Plugin#

One of the easiest ways to copy text to clipboard using jQuery is by using a third-party plugin called jQuery Clipboard. This plugin provides a simple API that allows you to bind copy and paste events easily.

Here's an example:

// Add the jQuery Clipboard plugin to your project
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>

// Initialize the plugin
new ClipboardJS('.copy-btn');

// Bind a click event to copy the text to clipboard
$('.copy-btn').click(function() {
  var textToCopy = $('.text-to-copy').val();
  ClipboardJS.copy(textToCopy);
});

• new ClipboardJS('.copy-btn') initializes the clipboard plugin with the .copy-btn class which will be used as the trigger to copy the text to clipboard.
• ClipboardJS.copy(textToCopy) is the main function that copies the text to clipboard.

Using the Clipboard API#

If you don't want to use a third-party plugin, you can use the Clipboard API which is supported by most modern browsers.

Here's an example:

// Bind a click event to copy the text to clipboard
$('.copy-btn').click(function() {
  var textToCopy = $('.text-to-copy').val();
  navigator.clipboard.writeText(textToCopy);
});

• navigator.clipboard.writeText(textToCopy) is the main function that copies the text to clipboard using the Clipboard API.

Conclusion#

Copying text to clipboard with jQuery is simple and can be done in multiple ways. You can use a third-party plugin like jQuery Clipboard or use the Clipboard API directly.