Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 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.

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:



My Personal Notes arrow_drop_up
Recommended Articles
Page :