JavaScript onkeydown Dogodek

Dogodek onkeydown se sproži, ko uporabnik pritisne tipko na tipkovnici. Ta dogodek je ključnega pomena za ustvarjanje interaktivnih obrazcev, bližnjic na tipkovnici in upravljanje uporabniških vnosov v spletnih aplikacijah. Sproži se, preden se dejanski znak vstavi, kar ga naredi idealnega za preverjanje vnosov in upravljanje posebnih tipk.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>Interaktivni prikaz dogodkov tipkovnice</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>
        .input-container {
            margin: 20px;
            padding: 15px;
            border-radius: 8px;
        }

        .keyboard-input {
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
            font-size: 16px;
            transition: all 0.3s ease;
        }

        .feedback-text {
            width: 100%;
            min-height: 20px;
            padding: 10px;
            border-radius: 4px;
            background-color: #e6edf3;
            color: #333333;
        }

        .active {
            background-color: #e7f5ff;
            border-color: #339af0;
        }
    </style>
</head>
<body>
<div class="input-container">
    <h3>Preizkusite vnos s tipkovnico</h3>
    <p>Tipkajte v spodnje vnosno polje za prikaz delovanja onkeydown dogodka:</p>
    
    <input type="text" 
           id="keyboardInput" 
           class="keyboard-input" 
           placeholder="Začnite tipkati..."
           onkeydown="handleKeyDown(event)">
    
    <div id="feedback" class="feedback-text">
        Tukaj se bodo prikazale informacije o dogodku
    </div>
</div>

<script>
    function handleKeyDown(event) {
        const input = document.getElementById("keyboardInput");
        const feedback = document.getElementById("feedback");
        
        // Dodamo active razred za vizualno povratno informacijo
        input.classList.add("active");
        
        // Ustvarimo informativno sporočilo
        const message = `
            Pritisnjena tipka: ${event.key}
            Koda tipke: ${event.keyCode}
            Shift tipka: ${event.shiftKey ? "Da" : "Ne"}
            Ctrl tipka: ${event.ctrlKey ? "Da" : "Ne"}
            Alt tipka: ${event.altKey ? "Da" : "Ne"}
        `;
        
        feedback.textContent = message;
        
        // Odstranimo active razred po kratkem zamiku
        setTimeout(() => {
            input.classList.remove("active");
        }, 200);
    }
</script>
</body>
</html>

REZULTAT