How to write code in jQuery that will copy the current site URL when a button is clicked?

Here is an example of jQuery code that copies the current website URL to the clipboard when clicking a button with the class copy-current-url:



Copy URL

Copy

<script>
    $(document).ready(function () {
        $('.copy-current-url').on('click', function () {
            // Create a temporary input element
            const tempInput = $('<input>');
            $('body').append(tempInput);

            // Set the current URL as the value
            tempInput.val(window.location.href).select();

            // Copy the text to the clipboard
            document.execCommand('copy');

            // Remove the temporary input element
            tempInput.remove();

            // Optionally, display a notification
            alert('URL copied to clipboard!');
        });
    });
</script>

How it works:

  1. When the button is clicked, a temporary <input> element is created.
  2. The current URL (window.location.href) is written into this element.
  3. The text is copied to the clipboard using the document.execCommand('copy') command.
  4. The temporary element is removed after copying.
  5. An optional notification is shown to indicate that the URL was successfully copied.

This approach works in most browsers. However, if you’re using modern methods, you can replace document.execCommand with the navigator.clipboard API for better browser support.

How useful is the publication?

Click on a star to rate it!

Average score 5 / 5. Number of grades: 1

No ratings yet. Rate it first.

Similar posts

Why Files with Identical Content (*.js, *.php, *.css) Can Have Different Sizes?

When developers compare files with identical content but notice that their sizes differ, it can be perplexing. Let’s explore why this happens and what factors influence the size of files with extensions like *.js, *.php, and *.css. 1. File Encoding One of the key factors affecting file size is text encoding. The most common encodings…
Read more

How to transfer a site from dle to WordPress?

Transferring a website from DLE (DataLife Engine) to WordPress can be a complex process, especially if the site has a lot of content. Here’s a step-by-step guide: 1. Preparation 2. Export Data from DLE DLE uses its own database structure, so you’ll need to export data and convert it into a format compatible with WordPress:…
Read more