Copy Text to Clipboard

How to Copy Text to Clipboard with Vanilla JavaScript

Watch the full tutorial here:
Youtube Rumble Odysee

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./main.js" defer></script>
    <title>Copy text</title>
</head>

<body>
    <textarea id="text">Hello Dev</textarea>
    <button id="copyBtn" onclick="copyText()">copy</button>
</body>

</html>

javascript

function copyText() {
    const copyBtn = document.getElementById('copyBtn');
    const textEl = document.querySelector('#text');
    const text = textEl.innerText || textEl.value;

    navigator.clipboard.writeText(text)
        .then(() => {
            copyBtn.innerHTML = 'Copied';
            setTimeout(() => {
                copyBtn.innerHTML = 'Copy';
            }, 5000);
        })
        .catch(err => {
            console.error("Error copying: ", err);
        });
}