HyperText Markup Language(HTML) is the basic building block of web pages that defines a structure. This markup language is used by browsers to manipulate data like text, images, and other content so that they can be displayed in the required format. HyperText refers to the links that connect web pages and markup defines the text document within the tags.
How to focus the element while loading the page in HTML?
We want that an element should be in focus whenever we load the page. We can do this in 2 ways:
- Using autofocus attribute of the element.
- Using Window: load event.
Let’s explore both ways with examples.
1. Using autofocus attribute The autofocus attribute is a boolean attribute i.e it can only be true or false. When this attribute is present inside an element, it specifies that the element inside which it is present should automatically get focus whenever the page loads.
The autofocus attribute can be only used within the below mentioned elements –
- <input>
- <button>
- <textarea>
- <select>
Syntax:
<elementName autofocus>
Example: In this example, whenever the page loads the input element gets focus and we can see it as the background color of input changes to #8ecae6.
<!DOCTYPE html> <html>
<head>
<title>Using autofocus attribute</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<p>GeeksforGeeks</p>
<input type="text" placeholder=
"Hey Geeks, Type something here" autofocus>
</div>
</body>
</html>
|
* { margin: 0;
padding: 0;
box-sizing: border-box;
} div { margin: auto;
margin-top: 10px;
height: 100px;
width: 300px;
background-color: green;
text-align: center;
font-size: 24px;
font-family: Arial, Helvetica, sans-serif;
} p { padding-top: 15px;
color: whitesmoke;
} input { margin-top: 15px;
width: 75%;
color: black;
font-weight: bolder;
} input:focus { background-color: #8ecae6;
} |
Output:
2. Using Window: load Event: The load event of window object is fired when the complete page has loaded including stylesheets and images. Now when the page has been loaded , we can use HTMLElement.focus() method to provide focus to our element(if can be focused). The focused element is the one that receive keyboard and similar events by default.
Syntax:
HTMLElement.focus();
The focus() method can have an optional parameter that is an object providing options to control aspects of the focusing process.
Example:
<!DOCTYPE html> <html>
<head>
<title>Using load event</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<p>GeeksforGeeks</p>
<input type="text" placeholder=
"Hey Geeks, Type something here">
</div>
<script src="script.js"></script>
</body>
</html>
|
* { margin: 0;
padding: 0;
box-sizing: border-box;
} div { margin: auto;
margin-top: 10px;
height: 100px;
width: 300px;
background-color: green;
text-align: center;
font-size: 24px;
font-family: Arial, Helvetica, sans-serif;
} p { padding-top: 15px;
color: whitesmoke;
} input { margin-top: 15px;
width: 75%;
color: black;
font-weight: bolder;
} input:focus { background-color: #8ecae6;
} |
let inputElem = document.querySelector("input");
window.addEventListener('load', function(e) {
inputElem.focus();
}) |
Output:
Supported Browsers: