# .focus()

Categories: Events > Form Events | Forms

## .focus( handler(eventObject) ) Returns: jQuery

Description: Bind an event handler to the "focus" JavaScript event, or trigger that event on an element.

- #### version added: 1.0.focus( handler(eventObject) )

  handler(eventObject)A function to execute each time the event is triggered.

- #### version added: 1.4.3.focus( [eventData], handler(eventObject) )

  eventDataA map of data that will be passed to the event handler.

  handler(eventObject)A function to execute each time the event is triggered.

- #### version added: 1.0.focus()

- This method is a shortcut for `.bind('focus', handler)` in the first and second variations, and `.trigger('focus')` in the third.
- The `focus` event is sent to an element when it gains focus. This event is implicitly applicable to a limited set of elements, such as form elements (`<input>`, `<select>`, etc.) and links (`<a href>`). In recent browser versions, the event can be extended to include all element types by explicitly setting the element's `tabindex` property. An element can gain focus via keyboard commands, such as the Tab key, or by mouse clicks on the element.
- Elements with focus are usually highlighted in some way by the browser, for example with a dotted line surrounding the element. The focus is used to determine which element is the first to receive keyboard-related events.

For example, consider the HTML:

    <form>
      <input id="target" type="text" value="Field 1" />
      <input type="text" value="Field 2" />
    </form>
    <div id="other">
      Trigger the handler
    </div>

The event handler can be bound to the first input field:

    $('#target').focus(function() {
      alert('Handler for .focus() called.');
    });

Now clicking on the first field, or tabbing to it from another field, displays the alert:

Handler for .focus() called.

We can trigger the event when another element is clicked:

    $('#other').click(function() {
      $('#target').focus();
    });

After this code executes, clicks on Trigger the handler will also alert the message.

The `focus` event does not bubble in Internet Explorer. Therefore, scripts that rely on event delegation with the `focus` event will not work consistently across browsers. As of version 1.4.2, however, jQuery works around this limitation by mapping `focus` to the `focusin` event in its event delegation methods, `.live()` and `.delegate()`.

> Triggering the focus on hidden elements causes an error in Internet Explorer. Take care to only call `.focus()` without parameters on elements that are visible.

### Examples:

#### Example: Fire focus.

    <!DOCTYPE html>
    <html>
    <head>
      <style>span {display:none;}</style>
      <script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
    </head>
    <body>
      <p><input type="text" /> <span>focus fire</span></p>

    <p><input type="password" /> <span>focus fire</span></p>
    <script>
        $("input").focus(function () {
             $(this).next("span").css('display','inline').fadeOut(1000);
        });
    </script>

    </body>
    </html>

#### Demo:

#### Example: To stop people from writing in text input boxes, try:

    $("input[type=text]").focus(function(){
      $(this).blur();
    });

#### Example: To focus on a login input box with id 'login' on page startup, try:

    $(document).ready(function(){
      $("#login").focus();
    });