jQuery | focus() with Examples
The focus() is an inbuilt method in jQuery which is used to focus on an element. The element get focused by the mouse click or by the tab-navigating button.
Syntax:
$(selector).focus(function)
Here selector is the selected element.
Parameter: It accepts an optional parameter “function” which specifies the function to run when the focus event occurs.
Return Value: It returns the selected element which get focused.
Code #1:
In the below code, a function is passed to this method.
< html > < head > < style > span { display: none; } body { width: 35%; height: 50px; border: 2px solid green; padding: 35px; margin: 10px; } </ style > </ script > </ head > < body > <!-- this paragraph element get focused --> < p > < input type = "text" > < span >focused</ span ></ p > <!-- jQuery cdee to show working of this method --> < script > $("input").focus(function() { $(this).next("span").css("display", "inline"); }); </ script > </ body > </ html > |
Output:
Before the mouse clicking inside of the input field-
After the mouse clicking inside of the input field with text “GeeksforGeeks”-
Code #2:
In the below code, no parameter is passed to this method.
< html > < head > < style > span { display: none; } body { width: 30%; height: 50px; border: 2px solid green; padding: 35px; margin: 10px; } </ style > </ script > </ head > < body > <!-- this paragraph element get focused --> < p > < input type = "text" > < span >focused</ span ></ p > <!-- jQuery code to show working of this method --> < script > $("input").focus(); </ script > </ body > </ html > |
Output:
Before the mouse is clicked inside of the input field-
After the mouse is clicked inside of the input field with text “GeeksforGeeks”-
jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.
You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.