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.

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

  • Before page loads:
  • After page loads:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.