.focus()

Syntax


.focus(handler)           
.focus()

handler: A function to execute each time the event is triggered

Return value

The jQuery object, for chaining purposes.

Description

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

.focus(handler) is a shortcut for .bind('focus', handler). .focus() is a shortcut for .trigger('focus').

We can trigger the event when another element is clicked.


$('#other').click(function() {

 $('#target').focus();

});

Set focus to text box

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
             $("input").focus();
        });
    </script>
  </head>
  <body>
    <body>
     <p><input type="text" /> <span>focus event fire</span></p>
    </body>
</html>

Click to view the demo

Fire focus event

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("input").focus(function () {
                 $(this).next("span").css('color','red');
            });
        });
    </script>
  </head>
  <body>
    <body>
     <p><input type="text" /> <span>focus event fire</span></p>
    </body>
</html>

Click to view the demo

Set focus form field and set value

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
              $("input").removeAttr("disabled").focus().val("editable now");
        });
    </script>
  </head>
  <body>
    <body>
      <button>Enable</button>
      <input type="text" disabled="disabled" value="data"/>

  </body>
</html>

Click to view the demo

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
               $("button").click(function () {
                  $(this).next().removeAttr("disabled")
                         .focus()
                         .val("editable now");
               });
        });
    </script>
  </head>
  <body>
    <body>
      <button>Enable</button>
      <input type="text" disabled="disabled" value="can't edit this" />
    </body>
</html>

Click to view the demo

Home
JavaScript Book
jQuery

Event: