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