Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Input Email autofocus Property
The HTML DOM Input Email autofocus property controls whether an email input field automatically receives focus when the page loads. This property corresponds to the HTML autofocus attribute and can be both read and modified using JavaScript.
Syntax
Following is the syntax for getting the autofocus property value −
inputEmailObject.autofocus
Following is the syntax for setting the autofocus property −
inputEmailObject.autofocus = booleanValue
Parameters
The booleanValue parameter accepts the following values −
| Value | Description |
|---|---|
| true | The email input field will be automatically focused when the page loads. |
| false | The email input field will not be automatically focused (default behavior). |
Return Value
This property returns a Boolean value indicating whether the email input field has autofocus enabled (true) or disabled (false).
Example − Getting Autofocus Status
Following example demonstrates how to check if an email input field has autofocus enabled −
<!DOCTYPE html>
<html>
<head>
<title>Input Email Autofocus Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Email Input Autofocus Status</h2>
<form>
<label for="email1">Email with autofocus:</label>
<input type="email" id="email1" placeholder="user@example.com" autofocus>
<br><br>
<label for="email2">Email without autofocus:</label>
<input type="email" id="email2" placeholder="admin@example.com">
<br><br>
<button type="button" onclick="checkAutofocus()">Check Autofocus Status</button>
</form>
<div id="result" style="margin-top: 20px; font-weight: bold;"></div>
<script>
function checkAutofocus() {
var email1 = document.getElementById("email1");
var email2 = document.getElementById("email2");
var result = document.getElementById("result");
result.innerHTML = "Email1 autofocus: " + email1.autofocus + "<br>" +
"Email2 autofocus: " + email2.autofocus;
}
</script>
</body>
</html>
The output shows the autofocus status of both email fields −
Email1 autofocus: true Email2 autofocus: false
Example − Setting Autofocus Dynamically
Following example shows how to enable or disable autofocus on an email input field using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Autofocus Control</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Control Email Autofocus</h2>
<form>
<label for="userEmail">User Email:</label>
<input type="email" id="userEmail" placeholder="Enter your email" autofocus>
<br><br>
<button type="button" onclick="enableAutofocus()">Enable Autofocus</button>
<button type="button" onclick="disableAutofocus()">Disable Autofocus</button>
<button type="button" onclick="checkStatus()">Check Status</button>
</form>
<p id="status" style="margin-top: 20px; padding: 10px; background-color: #f0f0f0;"></p>
<script>
var emailInput = document.getElementById("userEmail");
var statusDiv = document.getElementById("status");
function enableAutofocus() {
emailInput.autofocus = true;
updateStatus();
}
function disableAutofocus() {
emailInput.autofocus = false;
updateStatus();
}
function checkStatus() {
updateStatus();
}
function updateStatus() {
statusDiv.textContent = "Autofocus is currently: " +
(emailInput.autofocus ? "ENABLED" : "DISABLED");
}
// Show initial status
updateStatus();
</script>
</body>
</html>
The buttons allow you to dynamically control the autofocus property and see the current status.
Example − Complete Form with Autofocus Management
Following example demonstrates a practical use case where autofocus is managed based on form validation −
<!DOCTYPE html>
<html>
<head>
<title>Email Form with Autofocus Management</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>User Registration Form</h2>
<form>
<fieldset style="padding: 20px; border: 1px solid #ccc;">
<legend>Email Registration</legend>
<label for="email">Email Address:</label>
<input type="email" id="email" placeholder="user@example.com" autofocus required>
<br><br>
<label for="confirmEmail">Confirm Email:</label>
<input type="email" id="confirmEmail" placeholder="Confirm your email">
<br><br>
<button type="button" onclick="validateForm()">Validate Form</button>
<button type="button" onclick="resetAutofocus()">Reset Focus to Email</button>
</fieldset>
</form>
<div id="message" style="margin-top: 20px; padding: 10px;"></div>
<script>
function validateForm() {
var email = document.getElementById("email");
var confirmEmail = document.getElementById("confirmEmail");
var message = document.getElementById("message");
if (email.value === "") {
message.innerHTML = "<span style='color: red;'>Email field is empty. Autofocus enabled: " + email.autofocus + "</span>";
email.focus();
} else if (email.value !== confirmEmail.value) {
message.innerHTML = "<span style='color: orange;'>Emails do not match. Please check both fields.</span>";
confirmEmail.focus();
} else {
message.innerHTML = "<span style='color: green;'>Form validation successful! Autofocus: " + email.autofocus + "</span>";
}
}
function resetAutofocus() {
var email = document.getElementById("email");
email.autofocus = true;
email.focus();
document.getElementById("message").innerHTML = "<span style='color: blue;'>Autofocus reset and email field focused.</span>";
}
</script>
</body>
</html>
This example shows how autofocus can be managed in a real form scenario, with validation and focus management.
Key Points
-
The
autofocusproperty only affects the initial page load behavior, not subsequent focus events. -
Only one element on a page should have autofocus enabled at a time for proper user experience.
-
Setting
autofocus = falseremoves the autofocus attribute, but does not immediately remove focus if the element is already focused. -
The property is particularly useful for login forms, search boxes, and primary input fields.
Browser Compatibility
The autofocus property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. It is part of the HTML5 specification and widely supported across different platforms.
Conclusion
The HTML DOM Input Email autofocus property provides programmatic control over automatic focusing of email input fields. It returns a boolean value indicating the autofocus state and can be dynamically modified to enhance user experience in web forms. This property is essential for creating accessible and user-friendly email input interfaces.
182 Views
