JavaScript HTML DOM Dogodki: blur

Dogodek blur se zgodi, ko element preneha biti v fokusu – na primer, ko uporabnik klikne nekam drugam ali pritisne tipko Tab. Ta dogodek ne potuje naprej po strukturi strani, zato ga moraš pripeti neposredno na polje, ki ga želiš spremljati. Če želiš, da en poslušalec zajame vse podrejene elemente, uporabi focusout, ki se obnaša podobno, ampak se prenese na starše.
PRIMER
<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>blur</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    
    <style>
        *, *::before, *::after {
            box-sizing: border-box;
        }
        
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        
        .wrap {
            max-width: 100%;
            margin: 20px auto;
            padding: 16px;
            border: 1px solid green;
            border-radius: 8px;
        }
        
        .row {
            max-width: 100%;
            margin-bottom: 12px;
        }
        
        label {
            display: block;
            margin: 10px 0 6px;
        }
        
        input, button {
            font: inherit;
        }
        
        input[type="text"] {
            width: 100%;
            padding: 8px;
            border-radius: 6px;
        }
        
        input[type="text"]:focus {
            outline: 2px solid #60a5fa;
            outline-offset: 2px;
            border-color: #60a5fa;
        }
        
        .editable {
            min-height: 64px;
            padding: 8px;
            border: 1px solid;
            border-radius: 6px;
        }
        
        /* Poudarek ob fokusu (brez background-color) */
        .has-focus {
            outline: 2px solid #93c5fd;
            outline-offset: 2px;
        }
        
        /* Nežen poudarek ob izgubi fokusa (brez ozadja) */
        .lost-focus {
            border-color: #64748b;
        }
        
        .inline {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        
        .log {
            margin: 14px auto 0;
            padding: 8px 10px;
            border: 1px solid;
            border-radius: 8px;
            font: 16px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
            white-space: pre-wrap;
            min-height: 56px;
            max-height: 160px;
            overflow: auto;
        }
        
        .hint {
            font-size: 14px;
            margin-top: 4px;
        }
    </style>
</head>
<body>
    <div class="wrap" role="form" aria-label="Primer dogodka blur (ne mehurčka)">
        <div class="row">
            <label for="ime">Ime</label>
            <input id="ime" type="text" placeholder="Klikni, tipkaj, nato zapusti polje" />
            <div class="hint">
                blur se sproži, ko polje izgubi fokus;
            </div>
        </div>
        
        <div class="row">
            <label for="opis">Opis (contenteditable)</label>
            <div id="opis" class="editable" contenteditable="true" aria-label="Uredi opis">
                Klikni tukaj, nato pojdi izven …
            </div>
        </div>
        
        <div class="row inline">
            <button type="button" id="go-ime">Fokus na #ime</button>
            <button type="button" id="go-opis">Fokus na #opis</button>
            <button type="button" id="blur-ime">Odmakni fokus z #ime</button>
            <button type="button" id="blur-opis">Odmakni fokus z #opis</button>
            <button type="button" id="reset-all">Počisti log in ponastavi polja</button>
        </div>
    </div>
    
    <pre id="log" class="log" aria-live="polite"></pre>
    
    <script>
        (function () {
            var ime = document.getElementById("ime");
            var opis = document.getElementById("opis");
            var log = document.getElementById("log");
            var goIme = document.getElementById("go-ime");
            var goOpis = document.getElementById("go-opis");
            var blurIme = document.getElementById("blur-ime");
            var blurOpis = document.getElementById("blur-opis");
            var resetBtn = document.getElementById("reset-all");
            
            function write(msg) {
                var t = new Date().toLocaleTimeString();
                log.textContent += "[" + t + "] " + msg + "\n";
                log.scrollTop = log.scrollHeight;
            }
            
            function wireFocusBlur(el) {
                el.addEventListener("focus", function () {
                    el.classList.add("has-focus");
                    el.classList.remove("lost-focus");
                    write("focus na #" + (el.id || "brez-id"));
                });
                
                el.addEventListener("blur", function () {
                    el.classList.remove("has-focus");
                    el.classList.add("lost-focus");
                    write("blur na #" + (el.id || "brez-id"));
                });
            }
            
            // blur NE mehurčka → vežemo neposredno na elemente
            wireFocusBlur(ime);
            wireFocusBlur(opis);
            
            // Programski fokus
            goIme.addEventListener("click", function () { ime.focus(); });
            goOpis.addEventListener("click", function () { opis.focus(); });
            
            // Programski blur
            blurIme.addEventListener("click", function () { ime.blur(); });
            blurOpis.addEventListener("click", function () { opis.blur(); });
            
            // Počisti log + ponastavi polja
            resetBtn.addEventListener("click", function () {
                log.textContent = "";
                ime.value = "";
                opis.textContent = "";
                ime.classList.remove("has-focus", "lost-focus");
                opis.classList.remove("has-focus", "lost-focus");
                if (document.activeElement === ime || document.activeElement === opis) {
                    document.activeElement.blur();
                }
                write("reset: polja ponastavljena in log počiščen");
            });
        })();
    </script>
</body>
</html>
REZULTAT