JavaScript onkeyup dogodek

Dogodek onkeyup se sproži takoj po tem, ko uporabnik spusti pritisnjeno tipko na tipkovnici. Ta dogodek je še posebej uporaben za preverjanje vnosov po končanem tipkanju, spreminjanje besedila v realnem času in izvajanje akcij, ko uporabnik zaključi z vnosom.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>Demonstracija onkeyup dogodka</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>
        .container {
            max-width: 600px;
            margin: 20px auto;
            padding: 20px;
            font-family: Arial, sans-serif;
        }

        .input-group {
            margin-bottom: 20px;
            padding: 15px;
            border-radius: 8px;
        }

        .text-input {
            width: 100%;
            padding: 10px;
            border: 2px solid #dee2e6;
            border-radius: 4px;
            font-size: 16px;
            transition: all 0.3s ease;
        }

        .text-input:focus {
            outline: none;
            border-color: #4dabf7;
            box-shadow: 0 0 0 3px rgba(77, 171, 247, 0.2);
        }

        .result-display {
            margin-top: 10px;
            padding: 10px;
            border-radius: 4px;
            background-color: white;
            min-height: 20px;
        }

        .character-count {
            font-size: 14px;
            margin-top: 5px;
        }

        .uppercase-text {
            font-weight: bold;
            color: #1971c2;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="input-group">
            <h3>Pretvorba v velike črke</h3>
            <input type="text" 
                   id="uppercaseInput" 
                   class="text-input" 
                   placeholder="Vnesite besedilo..."
                   onkeyup="convertToUppercase()">
            <div id="uppercaseResult" class="result-display"></div>
        </div>
    
        <div class="input-group">
            <h3>Števec znakov</h3>
            <textarea id="textCounter" 
                      class="text-input" 
                      placeholder="Začnite tipkati..."
                      onkeyup="countCharacters()"></textarea>
            <div id="charCount" class="character-count">Število znakov: 0</div>
        </div>
    </div>
    
    <script>
        function convertToUppercase() {
            const input = document.getElementById("uppercaseInput");
            const result = document.getElementById("uppercaseResult");
            result.innerHTML = `<span class="uppercase-text">${input.value.toUpperCase()}</span>`;
        }
        
        function countCharacters() {
            const textarea = document.getElementById("textCounter");
            const counter = document.getElementById("charCount");
            const count = textarea.value.length;
            counter.textContent = `Število znakov: ${count}`;
        }
    </script>
</body>
</html>

REZULTAT