page focus and focus/blur events

by int32_t

HTML

<input>
<pre id=console></pre>

CSS

.DIDFOCUS {
    background-color: #ccffcc;
}
.DIDBLUR {
    background-color: #ffcccc;
}

JavaScript

var i = document.querySelector('input');
i.onfocus = function() {
    var p = document.querySelector('pre');
    p.textContent = 'The input got focused.';
    p.className = 'DIDFOCUS';
};
i.onblur = function() {
    var p = document.querySelector('pre');
    p.textContent = 'The input lost focus.';
    p.className = 'DIDBLUR';
};

setInterval(function() {
    i.focus();
    setTimeout(function() {
        i.blur();
    }, 1000);
}, 2000);