Set the focus to HTML form element using JavaScript
To set focus to an HTML form element, the focus() method of JavaScript can be used. To do so, call this method on an object of the element that is to be focused, as shown in the example.
Example 1: The focus() method is set to the input tag when user clicks on Focus button.
<!DOCTYPE html> <html> <head> <title> Set focus to HTML form element </title> </head> <body> <p> Click on button to set focus on input field </p> <form> <input type="text" id="input1"> <br><br> <button type="button" onclick="focusInput()"> Set Focus </button> </form> <script> function focusInput() { document.getElementById("input1").focus(); } </script> </body> </html> |
chevron_right
filter_none
Output:
- Before Clicking the button:
- After Clicking the button:
Example 2: This example focuses on the input field automatically on page load.
<!DOCTYPE html> <html> <head> <title> Set focus to HTML form element </title> </head> <body> <p> Click on button to focus on the input field. </p> <form> Name: <input type="text" id="input1"> <br><br> Age: <input type="text" id="input2"> </form> <script> window.onload = function() { document.getElementById("input1").focus(); } </script> </body> </html> |
chevron_right
filter_none
Output:
Example 3: The following program focuses on the input field when clicked on Focus button. To blur the focused input field, the blur() property can be used.
<!DOCTYPE html> <html> <head> <title> Set focus to HTML form element </title> </head> <body> <p> Click on button to focus on the input field. </p> <form> <input type="text" id="input1"> <br><br> <button type="button" onclick="focusInput()"> Focus </button> <button type="button" onclick="blurInput()"> Blur </button> </form> <script> function focusInput() { document.getElementById("input1").focus(); } function blurInput() { document.getElementById("input1").blur(); } </script> </body> </html> |
chevron_right
filter_none
Output:
- Before Clicking the button:
- After Clicking on Focus button:
- After Clicking on Blur button:
Recommended Posts:
- Implement a JavaScript when an element loses focus
- JQuery | Set focus on a form input text field on page load
- Form validation using HTML and JavaScript
- JavaScript | Focus()
- How to remove an HTML element using JavaScript ?
- HTML | DOM focus() Method
- How to rotate an HTML div element 90 degrees using JavaScript ?
- Check whether HTML element has scrollbars using JavaScript
- How to add/update an attribute to an HTML element using JavaScript?
- Javascript | Window Blur() and Window Focus() Method
- How to get form data using JavaScript/jQuery?
- CSS to put icon inside an input element in a form
- How to enable/disable all input controls inside a form element using jQuery ?
- HTML | form Tag
- HTML | DOM Form name Property
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.
