Focus events

When an element gains focus, the browser fires a "focus" event on it. When it loses focus, a "blur" event fires.

Unlike other events, these two events do not propagate. A handler on a parent element is not notified when a child element gains or loses focus.

The following example displays help text for the text field that currently has focus.

<p>Name:<input type="text"data-help="Your full name"></p>
<p>Age:<input type="text"data-help="Age in years"></p>
<p id="help"></p>

var help = document.querySelector("#help");
var fields = document.querySelectorAll("input");
for (var i = 0; i & lt; fields.length; i++) {
    fields[i].addEventListener("focus", function(event) {
        var text ="data-help");
        help.textContent = text;
    fields[i].addEventListener("blur", function(event) {
        help.textContent = "";
Related Tutorial
Follow Us #
Contents +