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 maxLength Property
The HTML DOM Input Email maxLength property controls the maximum number of characters allowed in an email input field. This property returns or sets the maximum character limit for user input and returns -1 if no limit is defined.
Syntax
Following is the syntax for returning the maxLength property −
inputEmailObject.maxLength
Following is the syntax for setting the maxLength property −
inputEmailObject.maxLength = number
Parameters
The number parameter represents a positive integer specifying the maximum number of characters allowed in the email input field. Setting it to -1 removes the character limit.
Return Value
The property returns an integer representing the current maximum character limit. If no maxLength attribute is set, it returns -1.
Example − Getting and Setting maxLength
Following example demonstrates how to get and modify the maxLength property of an email input field −
<!DOCTYPE html>
<html>
<head>
<title>Input Email maxLength Property</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.container { max-width: 500px; margin: 0 auto; text-align: center; }
input[type="email"] { padding: 8px; margin: 10px; width: 200px; }
input[type="button"] { padding: 8px 15px; margin: 5px; border-radius: 5px; }
#display { margin: 15px 0; padding: 10px; background: #f0f8ff; border-radius: 5px; }
</style>
</head>
<body>
<div class="container">
<h2>Email maxLength Property Demo</h2>
<label for="emailInput">Employee Email:</label><br>
<input type="email" id="emailInput" placeholder="user@example.com" maxlength="15"><br>
<input type="button" onclick="showMaxLength()" value="Show MaxLength">
<input type="button" onclick="increaseMaxLength()" value="Increase MaxLength">
<input type="button" onclick="removeMaxLength()" value="Remove MaxLength">
<div id="display">MaxLength: 15</div>
</div>
<script>
var emailInput = document.getElementById("emailInput");
var display = document.getElementById("display");
function showMaxLength() {
var maxLen = emailInput.maxLength;
display.textContent = "Current MaxLength: " + (maxLen === -1 ? "No limit" : maxLen);
}
function increaseMaxLength() {
if (emailInput.maxLength === -1) {
emailInput.maxLength = 20;
} else {
emailInput.maxLength += 10;
}
display.textContent = "MaxLength increased to: " + emailInput.maxLength;
}
function removeMaxLength() {
emailInput.maxLength = -1;
display.textContent = "MaxLength removed (unlimited characters)";
}
</script>
</body>
</html>
The output shows an email input field with buttons to manipulate the maxLength property. Initially set to 15 characters, you can increase the limit or remove it entirely.
Example − Form Validation with maxLength
Following example demonstrates using maxLength for email validation in a login form −
<!DOCTYPE html>
<html>
<head>
<title>Email Validation with maxLength</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.form-container { max-width: 400px; margin: 0 auto; }
.form-group { margin: 15px 0; }
label { display: block; margin-bottom: 5px; font-weight: bold; }
input[type="email"] { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; }
.btn { padding: 10px 20px; margin: 10px 5px; border-radius: 4px; cursor: pointer; }
.btn-primary { background: #007bff; color: white; border: none; }
.btn-secondary { background: #6c757d; color: white; border: none; }
.message { padding: 10px; margin: 10px 0; border-radius: 4px; }
.success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
</style>
</head>
<body>
<div class="form-container">
<h2>Employee Login Form</h2>
<div class="form-group">
<label for="employeeEmail">Email Address:</label>
<input type="email" id="employeeEmail" placeholder="Enter your email" maxlength="50">
<small>Maximum 50 characters allowed</small>
</div>
<button class="btn btn-primary" onclick="validateLogin()">Login</button>
<button class="btn btn-secondary" onclick="adjustMaxLength()">Adjust MaxLength</button>
<div id="message"></div>
</div>
<script>
var emailField = document.getElementById("employeeEmail");
var messageDiv = document.getElementById("message");
function validateLogin() {
var email = emailField.value.trim();
var maxLen = emailField.maxLength;
messageDiv.className = "message";
if (email === "") {
messageDiv.className += " error";
messageDiv.textContent = "Please enter an email address.";
} else if (email.length > maxLen && maxLen !== -1) {
messageDiv.className += " error";
messageDiv.textContent = `Email exceeds maximum length of ${maxLen} characters.`;
} else if (!email.includes("@")) {
messageDiv.className += " error";
messageDiv.textContent = "Please enter a valid email address.";
} else {
messageDiv.className += " success";
messageDiv.textContent = `Login successful! Email: ${email} (Length: ${email.length}/${maxLen === -1 ? '?' : maxLen})`;
}
}
function adjustMaxLength() {
var currentMax = emailField.maxLength;
var newMax = currentMax === 50 ? 30 : 50;
emailField.maxLength = newMax;
messageDiv.className = "message success";
messageDiv.textContent = `MaxLength adjusted to ${newMax} characters.`;
}
</script>
</body>
</html>
This example shows a practical implementation where the maxLength property is used for form validation, ensuring email addresses don't exceed the specified character limit.
Browser Compatibility
The maxLength property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 10+. The property works consistently across all platforms that support HTML5 input elements.
Key Points
The maxLength property only limits character input; it doesn't validate email format.
Setting maxLength to
-1removes any character limit from the input field.The property can be dynamically modified using JavaScript after the page loads.
When maxLength is reached, users cannot type additional characters in the input field.
The property works alongside other email input validation like the
patternattribute.
Conclusion
The HTML DOM Input Email maxLength property provides essential control over email input field character limits. It returns -1 when no limit is set and allows dynamic modification of character restrictions through JavaScript, making it valuable for form validation and user experience optimization.
149 Views
