jQuery: Focus event

This entry is part 8 of 33 in the series jQuery Tutorial

There are a few other events that are commonly used in jQuery.

We look at an interesting event called focus.  Once you put the mouse into the textbox, the textbox will be put into focus.

<!doctype html>
    <title>focus demo</title>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
        span {
            display: none;

<p>Enter something: <input type='text'> <span>You are in focus</span></p>
    $('input').focus(function () {


Try The Code

We have an anonymous function in focus and after the cursor has entered the text box, the function is ran bringing the text box in focus.

Here, we also have some simple CSS code, display: none.  That means anything that is wrapped inside the <span> will not be shown when the page is loaded.

We use fadeIn(), which is an animation method in jQuery to bring out the the ‘You are in focus’ text.

The 4000 in fadeIn(4000) is the time required to show the text.  In this case, it is 4000ms.