jQuery API

.focus()

.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.

Attempting to set focus to a hidden element causes an error in Internet Explorer. Take care to only use .focus() on elements that are visible. To run an element's focus event handlers without setting focus to the element, use .triggerHandler("focus") instead of .focus().

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().

Examples:

Example: Fire focus.

<!DOCTYPE html>
<html>
<head>
  <style>span {display:none;}</style>
  <script src="http://code.jquery.com/jquery-latest.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();
});

Support and Contributions

Need help with .focus() or have a question about it? Visit the jQuery Forum or the #jquery channel on irc.freenode.net.

Think you've discovered a jQuery bug related to .focus()? Report it to the jQuery core team.

Found a problem with this documentation? Report it on the GitHub issue tracker

  • http://twitter.com/julioc_oliveira Júlio C. Oliveira

    not work $(window).focus(); or $(document).focus(); on firefox 3.6 or 3.5

    • http://jppommet.posterous.com/ Jean-Pierre Pommet

      Hi Julio,

      it is written above in the documentation that focus() works only in limited elements, in this case elements part of a form and links.

  • SMan

    Justing,

    I to can confirm what you're seeing. I was having issue swith .focus() where the events attached to the element would not trigger unless I clicked somewhere else, and then clicked back inside. So I used your [0] workaround, and it works! Thanks a bunch, and hope the jQuery folks are reading this…

    • Anonymous

      > hope the jQuery folks are reading this…
      Why should they? For that, there is a BugTracker!
      Go to http://dev.jquery.com/ and search and report an issues there.
      http://dev.jquery.com/

      • SMan

        Brilliant! But I’m going to hope the people who uncovered this bug before me have reported it. Otherwise, I’m happy to use the workaround.

    • eFBé
  • kris

    On FF 3.6.3 the old variant doesn't work – use this one to get completely focus-free on every browser:

    $('a').focus(function(){
    $(this).blur();
    });

  • Mark Hill

    If you want to send the focus back to where it came from in a .blur()–e.g., tell the user that their input is invalid and go back to make them correct it–you'll need to use a timer so that .blur() can finish before you do .focus():

    $('#field').blur(function(){

    alert('Invalid value');
    setTimeout(function() { $('#field').focus(); }, 50);
    }

    • Bhumivaghani

      thankssssssssssssssssss

  • Gavin Dibley

    when you manipulate elements triggered with focus(), it may also trigger blur().

    To prevent this from happening, use focusin() instead.

  • Andy

    If you want to focus a div or anything normally can’t be focused, set the tag’s tabindex to -1 first.
    eg: $(“div#header”).attr(“tabindex”,-1).focus();

    • Mansh Sharma

      I think this hold good when you want the first one of your collection to be focused by default when the page loads!

  • mahendran

    Hi,

    Focus() and .select() having bug .After button click event fired then its not working for telephonumber mask

    thanks

    mahendran

  • Mike Johnson

    Hi, I'm trying to append and prepend brackets onto the item in focus, but getting a syntax error. i've tried searching elsewhere before asking, but haven't come up with anything yet.

    $(':text').focus(function(){
    $(this).append('<img '=”" src=”/images/r_Bracket.gif”>);
    $(this).prepend('<img '=”" src=”/images/l_Bracket.gif”>);
    })

    • Gavin Dibley

      Need to wrap the img tags in quotes correctly.

      $(':text').focus(function(){
      $(this).append('<img src=”/images/r_Bracket.gif”>');
      $(this).prepend('<img src=”/images/l_Bracket.gif”>');
      })

  • Maire Julien

    Can't get it working on Safari Mobile on iPhone
    Here is my code :
    $(function(){
    $(“#ch1″).focus();
    $(“#ch1″).keyup(function(){$(“#ch2″).focus();});
    $(“#ch2″).keyup(function(){$(“#ch3″).focus();});
    $(“#ch3″).keyup(function(){$(“#ch4″).focus();});
    $(“#ch4″).keyup(function(){$(“#ch5″).focus();});
    $(“#ch5″).keyup(function(){$(“#ch6″).focus();});
    $(“#ch6″).keyup(function(){alert(“OK”);});
    });

  • http://twitter.com/caarloshugo Carlos Hugo Gonzalez

    a function to put the focus where the tabindex = 1:

    $(document).ready( function(){
    $('input[tabindex=1]').focus();
    });