JQuery | Set focus on a form input text field on page load
The task is to set the focus on form input text field using JQuery. To do so, Here are a few of the most used techniques discussed.
First focus() method need to be discussed.
- jQuery focus() Method:
The focus event happens when an element gets focus (Either selected by a mouse click or by “tab-navigating” to it).
This method triggers the focus event, or adds a function to run when the focus event occurs.
Syntax:- Trigger the focus event for selected elements:
$(selector).focus()
- Attach a function to the focus event:
$(selector).focus(function)
Parameters:
- function: This parameter is optional. It specifies the function to execute when the focus event occurs.
- Trigger the focus event for selected elements:
Example 1: In this example the form input text field gets the focus as page loads by using focus() method . Here the input element is selected by input keyword in JQuery selector.
<!DOCTYPE HTML><html> <head> <title> JQuery | Set focus on a form input text field on page load. </title> <script src= </script></head> <body style="text-align:center;" id="body"> <h1 style="color:green;"> GeeksForGeeks </h1> <p id="GFG_UP" style="font-size: 15px; font-weight: bold;"> This input box gets the focus as the page loads. </p> <form id="form"> Input : <input type="text" name="input_field" /> </form> <br> <p id="GFG_DOWN" style="color:green; font-size: 20px; font-weight: bold;"> </p> <script> $("input:text").focus(); </script></body> </html> |
Output:
- Before page loads:
- After page loads:
Example 2: In this example the form input text field gets the focus as page loads by using focus() method . Here the input element is selected by id of form element and its own id in JQuery selector.
<!DOCTYPE HTML><html> <head> <title> JQuery | Set focus on a form input text field on page load. </title> <script src= </script></head> <body style="text-align:center;" id="body"> <h1 style="color:green;"> GeeksForGeeks </h1> <p id="GFG_UP" style="font-size: 15px; font-weight: bold;"> This input box gets the focus as the page loads. </p> <form id="form"> Input : <input id="form_input" type="text" name="input_field" /> </form> <br> <p id="GFG_DOWN" style="color:green; font-size: 20px; font-weight: bold;"> </p> <script> $("#form #form_input").focus(); </script></body> </html> |
Output:
- Before page loads:
- After page loads:
Please Login to comment...