Copy active URL to the clipboard in 2022 using the clipboard, without execCommand

Simple JavaScript functionality OnClick event to copy a current link by clicking the image or icon and show the tooltips message saying “Link copied”.

As the document.execCommand(‘copy’); is depreciated, its replacement is navigator.clipboard.writeText, so you can copy the current URL to clipboard with following JavaScript:

navigator.clipboard.writeText(window.location.href);

How to show the message “Link Copied” after the click?

The simple JavaScript code to show the Link Copied message after the click is:

navigator.clipboard.writeText(window.location.href);this.insertAdjacentHTML('afterend', '<div class=linktooltips-container>Link copied</div>');setTimeout(() => { document.querySelectorAll('.linktooltips-container').forEach(el => el.remove()); }, 3000);

How do you copy a URL on a button click?

Full code with HTML CSS and JavaScript for copying the URL on a button click is something like below, here we use SVG icon as the button:

<style>
   .copylink-containter{
       position: absolute;
       top: 50vh;
       padding: 20px;
       z-index: 999999999;
   }
   .linktooltips-container{
       background-color: #030303;
       color: #ffffff;
       padding: 5px 30px;
       border-radius: 10px;
 
   }
</style>
<div class="copylink-containter">
   <a onclick="navigator.clipboard.writeText(window.location.href);this.insertAdjacentHTML('afterend', '<div class=linktooltips-container>Link copied</div>');setTimeout(() => { document.querySelectorAll('.linktooltips-container').forEach(el => el.remove()); }, 3000);" target="_blank">
       <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M172.5 131.1C228.1 75.51 320.5 75.51 376.1 131.1C426.1 181.1 433.5 260.8 392.4 318.3L391.3 319.9C381 334.2 361 337.6 346.7 327.3C332.3 317 328.9 297 339.2 282.7L340.3 281.1C363.2 249 359.6 205.1 331.7 177.2C300.3 145.8 249.2 145.8 217.7 177.2L105.5 289.5C73.99 320.1 73.99 372 105.5 403.5C133.3 431.4 177.3 435 209.3 412.1L210.9 410.1C225.3 400.7 245.3 404 255.5 418.4C265.8 432.8 262.5 452.8 248.1 463.1L246.5 464.2C188.1 505.3 110.2 498.7 60.21 448.8C3.741 392.3 3.741 300.7 60.21 244.3L172.5 131.1zM467.5 380C411 436.5 319.5 436.5 263 380C213 330 206.5 251.2 247.6 193.7L248.7 192.1C258.1 177.8 278.1 174.4 293.3 184.7C307.7 194.1 311.1 214.1 300.8 229.3L299.7 230.9C276.8 262.1 280.4 306.9 308.3 334.8C339.7 366.2 390.8 366.2 422.3 334.8L534.5 222.5C566 191 566 139.1 534.5 108.5C506.7 80.63 462.7 76.99 430.7 99.9L429.1 101C414.7 111.3 394.7 107.1 384.5 93.58C374.2 79.2 377.5 59.21 391.9 48.94L393.5 47.82C451 6.731 529.8 13.25 579.8 63.24C636.3 119.7 636.3 211.3 579.8 267.7L467.5 380z"/></svg>
   </a>
</div>

In this way, you can copy the active URL on click, as well as please post your questions or comments, or any other easy way that you guys are using. You can follow us at our Twitter account @rupaknpl Facebook page @Webocreation. Subscribe to our YouTube channel for Opencart tutorials, and click to see other eCommerce tips and tricks.