How to Copy Text to Clipboard using Jquery

16 Apr 2023 | jQuery


In this blog, we will learn how to copy text to the clipboard using jQuery. The clipboard is a temporary storage area for data that is being transferred between applications or within an application. Copying text to the clipboard using jQuery is a simple process that can be achieved with just a few lines of code.

Before we dive into the code, let's understand the concept of the clipboard. The clipboard is a buffer that stores data temporarily. It is a virtual representation of a physical clipboard and can be used to copy or cut data from one place and paste it into another.

Now let's see how we can use jQuery to copy text to the clipboard. First, we need to create a button that will trigger the copy operation. We can use the jQuery click() function to detect when the button is clicked. Inside the click() function, we can use the execCommand() method to copy the text to the clipboard.

Here's the code to achieve this:

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div>
    <p id="text-to-copy">Copy this text to clipboard</p>
    <button id="copy-button">Copy</button>
  </div>

  <script>
    $(document).ready(function() {
      $('#copy-button').click(function() {
        var textToCopy = $('#text-to-copy').text();
        var tempTextarea = $('<textarea>');
        $('body').append(tempTextarea);
        tempTextarea.val(textToCopy).select();
        document.execCommand('copy');
        tempTextarea.remove();
      });
    });
  </script>
</body>
</html>

Let's go through the code step by step. First, we have included the jQuery library in our code. Next, we have created a div element that contains a paragraph with the text we want to copy to the clipboard and a button to trigger the copy operation.

Inside the $(document).ready() function, we have used the click() function to detect when the copy button is clicked.

We have created a variable textToCopy to store the text we want to copy. We have used the jQuery text() function to get the text from the paragraph with the id of text-to-copy.

Next, we have created a temporary textarea element using the $('<textarea>') syntax. We have appended this element to the body element.

We have then set the value of the temporary textarea element to the text we want to copy using the jQuery val() function. We have also used the select() function to select the text inside the textarea element.

In conclusion, copying text to the clipboard using jQuery is a simple process that can be achieved with just a few lines of code. By using the execCommand() method and the jQuery val() and select() functions, we can easily copy text to the clipboard in our web applications.

And that's it! Now when the user clicks the copy button, the text will be copied to the clipboard.

Congratulations, Now the above code is ready to run.

Buddy! I hope you relished the tutorial, and it was good to see you again. Keep learning. Keep visiting.

Related Blogs