How to Make a Copy to Clipboard with Javascript

#webdev #javascript

Have you ever seen on a website page there is a copy URL to clipboard feature? This feature really helps users or visitors to copy URLs from website posts, so that users don't need to copy or copy URLs manually. Do you intend to add a copy URL to clipboard feature on your website? if so, you are absolutely right to read this article because in this article we will both learn how to create the URL to clipboard copy feature using javascript. The method is very easy, we only need to prepare a text editor, browser and internet network (optional).

The following is a sample code for creating the copy to clipboard feature.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Copy to Clipboard</title>
    </head>
    <body>
        <!-- The text field -->
        <input type="text" value="https://bisabos.com/blog/cara-membuat-animasi-mengetik-teks-dengan-css-dan-javascript" id="copyText" readonly>
        <!-- The button used to copy the text -->
        <button id="copyBtn">Copy text</button>
        <!--using sweetalert via CDN -->
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
        <script>
            const copyBtn = document.getElementById('copyBtn')
            const copyText = document.getElementById('copyText')

            copyBtn.onclick = () => {
                copyText.select();    // Selects the text inside the input
                document.execCommand('copy');    // Simply copies the selected text to clipboard 
                 Swal.fire({         //displays a pop up with sweetalert
                    icon: 'success',
                    title: 'Text copied to clipboard',
                    showConfirmButton: false,
                    timer: 1000
                });
            }
        </script>
    </body>
</html>