In this article we will explain how to set focus of form elements like <input>, <select> etc. in jquery or What is focus() method in jquery or why use focus() method in jquery with example.


The jQuery focus() event occurs when an element get focus. It is trigger by a mouse click or by tab-navigating to it.

This event is used to some limited sets of elements such as form elements like <input>, <select> etc. and links <a href>. The focused elements are usually highlighted in some way by the browsers.

The focus method is often used together with blur () method.



Example of jQuery focus () method

Let's take an example to demonstrate jQuery focus() Method.


<!DOCTYPE html>
<html xmlns="">
<head>    <title>Example of jQuery </title> <script src="Scripts/jquery-1.7.1.min.js"></script>    <script type="text/javascript">        $(document).ready(function () {
     $("button").click(function () {
     });        });    </script>    </head>
    <button>Click To Focus</button><br><br>     <input type="text" id="txtname" />    



use focus in jquery with call function

In above example we have a “textbox” and button when we click on button then our cursor will be focus on “textbox”.


focus() - Using Callback function

$(document).ready(function () {       
    $("#txtname").focus(function () {
       $(this).css("background", "red");             });        });    </script>


I hope this article will help to you.

 Let's check live example

Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

You may also like