Tekst kopiëren met één klik: HTML, CSS en JavaScript

Met dit script kun je stukken tekst uit een tekstbox kopieeren door op een (kopie) button te klikken!

Voorbeeld 1:

Zie de kopie tekst hieronder! 🙂

HTML code voor tekstbox / button:

<!-- START BLOK -->
<div class="copy-box">
<textarea class="copy-text" readonly>
Dit is de tekst die je wilt kopiëren.
</textarea>
<button type="button" class="copy-button">
    🖱️ Kopieer tekst
</button>
</div>
<!-- EINDE BLOK -->

Javascript

<script>
document.addEventListener('DOMContentLoaded', function () {

    const buttons = document.querySelectorAll('.copy-button');

    buttons.forEach(function(button) {

        button.addEventListener('click', async function() {

            const box = button.closest('.copy-box');
            const textarea = box.querySelector('.copy-text');

            try {

                await navigator.clipboard.writeText(textarea.value);

                const originalText = button.innerHTML;

                button.innerHTML = '✓ Gekopieerd!';
                button.classList.add('copied');

                setTimeout(function() {
                    button.innerHTML = originalText;
                    button.classList.remove('copied');
                }, 1800);

            } catch (error) {

                /* Fallback voor oudere browsers */
                textarea.select();
                textarea.setSelectionRange(0, 99999);

                document.execCommand('copy');

                const originalText = button.innerHTML;

                button.innerHTML = '✓ Gekopieerd!';
                button.classList.add('copied');

                setTimeout(function() {
                    button.innerHTML = originalText;
                    button.classList.remove('copied');
                }, 1800);
            }

        });

    });

});
</script>

CSS Style

<style>
.copy-box {
    width: 100%;
    max-width: 700px;
    margin: 18px 0;
    padding: 15px;
    background: #f7f7f7;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-sizing: border-box;
}

.copy-text {
    width: 100%;
    min-height: 110px;
    padding: 12px 14px;
    box-sizing: border-box;

    background: #fff;
    color: #333;

    border: 1px solid #ccc;
    border-radius: 7px;

    font-family: Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;

    resize: vertical;
    outline: none;

    transition: border-color 0.2s, box-shadow 0.2s;
}

.copy-text:focus {
    border-color: #888;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}

.copy-button {
    margin-top: 10px;
    padding: 10px 18px;

    background: #444;
    color: #fff;

    border: 0;
    border-radius: 6px;

    font-size: 14px;
    font-weight: bold;

    cursor: pointer;

    transition:
        background 0.2s,
        transform 0.1s;
}
/* Compact tekstvak voor links */ .copy-link { min-height: 0; height: 44px; resize: none; overflow: hidden; white-space: nowrap; } /* Link en knop mooi naast elkaar op grotere schermen */ .copy-link-box { display: flex; align-items: center; gap: 10px; } .copy-link-box .copy-button { margin-top: 0; flex-shrink: 0; } /* Op mobiel weer onder elkaar */ @media (max-width: 600px) { .copy-link-box { display: block; } .copy-link-box .copy-button { margin-top: 10px; width: 100%; } }

.copy-button:hover {
    background: #222;
}

.copy-button:active {
    transform: scale(0.97);
}

.copy-button.copied {
    background: #4d7459;
}


/* Mobiel */
@media (max-width: 600px) {

    .copy-box {
        padding: 12px;
    }

    .copy-text {
        min-height: 100px;
        font-size: 14px;
    }

    .copy-button {
        width: 100%;
    }
}
</style>

Je kunt ook onderstaande JS-script toevoegen. Dan hoef je het script en CSS niet apart te doen!

Dus dan heb je alleen de HTML code voor het tekstbox nodig!

JS: Kopie tekst script

Geef een reactie Reactie annuleren