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>

<script>
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 = event.target.getAttribute("data-help");
        help.textContent = text;
    });
    fields[i].addEventListener("blur", function(event) {
        help.textContent = "";
    });
}
</script>
Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #
Contents