JavaScript HTML DOM Events: Clipboard Overview

On this page you will find a comprehensive overview of Clipboard events – copy, cut and paste. Each event is explained in detail, accompanied by an interactive example that shows how to capture the event, read the clipboard content, and optionally adjust the UI. Click on an individual event to view its example and learn how to manage the clipboard effectively in your projects.
EXAMPLE
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Clipboard Overview</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
            padding: 20px;
        }

        .card {
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 16px;
            margin-bottom: 12px;
        }

        .card h3 {
            margin-top: 0;
        }

        a {
            color: #2563eb;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }

        button {
            display: none;
            margin-top: 8px;
            padding: 6px 12px;
            border: 1px solid #777;
            border-radius: 4px;
            cursor: pointer;
            background: #fff;
            color: #333;
        }

        textarea {
            margin-top: 8px;
            padding: 8px;
            width: 100%;
            max-width: 100%;
            font-family: monospace;
            font-size: 14px;
            resize: none;
            overflow: hidden;
            box-sizing: border-box;
        }

        #cutInput {
            box-sizing: border-box;
            font-family: monospace;
            font-size: 14px;
            margin-top: 8px;
            padding: 12px;
            width: 100%;
            max-width: 600px;
            border: 1px solid #777;
            border-radius: 4px;
        }

        .log {
            margin-top: 12px;
            padding: 10px;
            border: 1px solid #e5e7eb;
            border-radius: 4px;
            max-height: 180px;
            overflow: auto;
            font-family: monospace;
            font-size: 13px;
            background: #f3f4f6;
            color: #333;
        }
    </style>
</head>
<body>
    <h1>Clipboard Events in JavaScript</h1>
    <p>The browser provides three core events that fire when interacting with the clipboard: copy, cut and paste. Each 
       of them can be captured and used to run additional logic (logging, content modification, analytics).</p>

    <div class="card">
        <h3>copy – copying text</h3>
        <p>The copy event fires when the user starts copying selected content (Ctrl + C, right‑click → Copy). The 
           example shows how to log the selected text.</p>
    </div>

    <div class="card">
        <h3>cut – cutting text</h3>
        <p>The cut event fires when the user cuts selected content (Ctrl + X). The demo demonstrates how 
           to remove the selected text from the DOM while storing it in the clipboard.</p>

        <!-- Input that can be cut and later pasted into the “paste” demo -->
        <input id="cutInput" type="text" value="You can cut this text and paste it into the paste demo.">
    </div>

    <div class="card">
        <h3>paste – pasting text</h3>
        <p>The <code>paste</code> event fires when the user pastes content from the clipboard (Ctrl + V).</p>

        <!-- TEXTAREA – auto‑expands, no manual resizing -->
        <textarea id="autoResizeArea" rows="1" placeholder="Paste (Ctrl+V) text here…"></textarea>

        <button id="clearBtn">Clear</button>
        <!-- OPTIONAL – log to see what was pasted -->
        <div class="log" id="pasteLog"></div>
    </div>

    <script>
        // ELEMENTS
        const textarea = document.getElementById("autoResizeArea"); // textarea for paste
        const clearBtn = document.getElementById("clearBtn"); // “Clear” button
        const logBox = document.getElementById("pasteLog"); // log container
        const cutInput = document.getElementById("cutInput"); // input for cut
        const CHAR_LIMIT = 200; // when to show the clear button

        // LOG
        const log = (msg) => {
            const line = document.createElement("div");
            line.textContent = new Date().toLocaleTimeString() + ": " + msg;
            logBox.appendChild(line);
            logBox.scrollTop = logBox.scrollHeight;
        };

        // AUTO‑RESIZE - adjust textarea height based on content
        function autoResize() {
            textarea.style.height = "auto";
            textarea.style.height = textarea.scrollHeight + "px";
        }

        // SHOW / HIDE CLEAR BUTTON - depending on the length of the content
        function toggleClearButton() {
            if (textarea.value.length > CHAR_LIMIT) {
                clearBtn.style.display = "inline-block";
            } else {
                clearBtn.style.display = "none";
            }
        }

        // PASTE - when pasting into textarea
        textarea.addEventListener("paste", (e) => {
            const clipboardData = e.clipboardData || window.clipboardData;
            const pastedText = clipboardData.getData("text");

            // Wait until the text is actually inserted, then resize
            setTimeout(() => {
                autoResize();
                log(`Pasted text (length ${pastedText.length} characters)`);
                toggleClearButton(); // check if we need to show the clear button
            }, 0);
        });

        // INPUT (typing) - manual typing in textarea (automatically adjust height)
        textarea.addEventListener("input", () => {
            autoResize();
            toggleClearButton(); // show/hide clear button based on length
        });

        // CLEAR - a button that deletes the contents of a textarea
        clearBtn.addEventListener("click", () => {
            textarea.value = "";
            autoResize(); // reset height to a single line
            toggleClearButton(); // hide the button again
            log("Textarea content cleared.");
        });

        // CUT (from the input)
        // The input must be editable therefore, we use <input type="text">
        cutInput.addEventListener("cut", (e) => {
            // Get the selected text that will be cut
            const selectedText = cutInput.value.substring(
                cutInput.selectionStart,
                cutInput.selectionEnd
            );

            // Log the cut action (we do NOT call e.preventDefault(),
            // so the browser will actually cut the text and store it
            // in the clipboard)
            log(`cut – cut text: "${selectedText}"`);

            // NOTE: If you want to replace what gets stored in the clipboard:
            // e.clipboardData.setData("text/plain", "new clipboard content");
            // e.preventDefault(); // then you must manually remove/update the selected text
        });

        // INITIALISATION - sets the initial height and state of the button
        autoResize(); // in case there is pre‑filled content
        toggleClearButton(); // set the initial state of the clear button
    </script>
</body>
</html>
RESULT