JavaScript HTML DOM Dogodki: Pregled odložišča

Na tej strani najdete celovit pregled Clipboard dogodkov – copy, cut in paste. Vsak dogodek je podrobno razložen, prikazan je interaktivni primer, ki prikazuje, kako zajeti dogodek, kako prebrati vsebino odložišča in kako po potrebi prilagoditi UI. Kliknite na posamezen dogodek, da si ogledate primer in se naučite, kako v svojih projektih učinkovito upravljati z odložiščem.
PRIMER
<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>Pregled odložišča</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 dogodki v JavaScriptu</h1>
    <p>Brskalnik ponuja tri osnovne dogodke, ki se sprožijo pri delu z odložiščem: copy, cut in paste. Vsak od njih 
       lahko ujamemo in izvedemo dodatno logiko (beleženje, spreminjanje vsebine, analitika).</p>

    <div class="card">
        <h3>copy – kopiranje besedila</h3>
        <p>Dogodek copy nastane, ko uporabnik začne kopirati izbrano vsebino 
           (Ctrl + C, desni‑klik → Kopiraj). Primer prikazuje, kako zabeležimo izbrano besedilo v dnevnik.</p>
    </div>

    <div class="card">
        <h3>cut – izrezovanje besedila</h3>
        <p>Dogodek cut se sproži, ko uporabnik izreže izbrano vsebino (Ctrl + X). V demonstraciji lahko prikažemo, 
           kako odstranimo izbrano besedilo iz DOM‑a in ga hkrati shranimo v odložišče.</p>
    
        <!-- Input, ki ga lahko uporabnik izreže in nato prilepi v “paste” -->
        <input id="cutInput" type="text" value="Tukaj lahko besedilo izrežeš in ga prilepiš v paste.">
    </div>

    <div class="card">
        <h3>paste – lepljenje besedila</h3>
        <p>Dogodek <code>paste</code> nastane, ko uporabnik prilepi vsebino iz odložišča (Ctrl + V).</p>
    
        <!-- TEXTAREA – brez ročne velikosti, samodejno raste -->
        <textarea id="autoResizeArea" rows="1" placeholder="Prilepite (Ctrl+V) besedilo tukaj…"></textarea>
        
        <button id="clearBtn">Počisti</button>
        <!-- OPTIONAL – log, da vidimo, kaj smo prilepili -->
        <div class="log" id="pasteLog""></div>
    </div>

    <script>
        //  ELEMENTI
        const textarea = document.getElementById("autoResizeArea"); // textarea za paste
        const clearBtn = document.getElementById("clearBtn"); // gumb »Počisti«
        const logBox = document.getElementById("pasteLog"); // log‑okvir
        const cutInput = document.getElementById("cutInput"); // input, iz katerega bomo izrezovali
        const CHAR_LIMIT = 200; // število znakov, pri katerem se pokaže gumb
    
        //  LOG
        const log = (msg) => {
            const line = document.createElement("div");
            line.textContent = new Date().toLocaleTimeString() + ": " + msg;
            logBox.appendChild(line);
            logBox.scrollTop = logBox.scrollHeight;
        };
    
        //  AUTO‑RESIZE – prilagodi višino textarea na podlagi vsebine
        function autoResize() {
            textarea.style.height = "auto";
            textarea.style.height = textarea.scrollHeight + "px";
        }
    
        //  PRIKAŽI / SKRIJ GUMB »POČISTI« – odvisno od dolžine vsebine
        function toggleClearButton() {
            if (textarea.value.length > CHAR_LIMIT) {
                clearBtn.style.display = "inline-block";
            } else {
                clearBtn.style.display = "none";
            }
        }
    
        //  PASTE – ob lepljenju v textarea
        textarea.addEventListener("paste", (e) => {
            const clipboardData = e.clipboardData || window.clipboardData;
            const pastedText = clipboardData.getData("text");
    
            // Počakamo, da se besedilo dejansko vstavi, nato prilagodimo višino
            setTimeout(() => {
                autoResize();
                log(`Lepljeno besedilo (dolžina ${pastedText.length} znakov)`);
                toggleClearButton(); // preverimo, ali je presegel limit
            }, 0);
        });
    
        //  INPUT – ročno tipkanje v textarea (samodejno prilagodi višino)
        textarea.addEventListener("input", () => {
            autoResize();
            toggleClearButton(); // pokaže/skrije gumb glede na dolžino
        });
    
        //  POČISTI – gumb, ki izbriše vsebino textarea
        clearBtn.addEventListener("click", () => {
            textarea.value = "";
            autoResize(); // ponastavi višino na minimalno (1 vrstica)
            toggleClearButton(); // skrij gumb
            log("Vsebina textarea je bila izbrisana.");
        });
    
        //  CUT – izrezovanje iz input‑a
        // Vnos mora biti urejljiv, zato uporabljamo <input type="text">
        cutInput.addEventListener("cut", (e) => {
            // Pridobimo izbrano besedilo (ki bo izrezano)
            const selectedText = cutInput.value.substring(
                cutInput.selectionStart,
                cutInput.selectionEnd
            );
    
            // Zabeležimo v log (ne blokiramo privzetega dejanja,
            // zato bo brskalnik samodejno odstranil izbrano besedilo
            // in ga shranil v odložišče)
            log(`cut – izrezano besedilo: "${selectedText}"`);
    
            // **OPOMBA:** Če bi želeli spremeniti vsebino, ki se shrani v odložišče, uporabimo:
            // e.clipboardData.setData("text/plain", "nova vsebina");
            // e.preventDefault(); // potem moramo ročno izbrisati/posodobiti izbrano vsebino
        });
    
        //  INICIALIZACIJA – nastavi začetno višino in stanje gumba
        autoResize(); // če je že kakšna začetna vsebina v textarea
        toggleClearButton(); // nastavi začetno stanje gumba »Počisti«
    </script>
</body>
</html>
REZULTAT