JQuery | Set focus on a form input text field on page load

23 May, 2019
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:$(selector).focus()

$(selector).focus()

Attach a function to the focus event:$(selector).focus(function)

$(selector).focus(function)

Parameters:
function: This parameter is optional. It specifies the function to execute when the focus event occurs.
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="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">    </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="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">    </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:
jQuery-Misc
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.