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 Password size property
The HTML DOM Input Password size property is used for setting or returning the size attribute value of a password input field. It defines the visible width of the password field in terms of characters. The default width is 20 characters.
Syntax
Following is the syntax for setting the password size property −
passwordObject.size = number
Following is the syntax for getting the password size property −
passwordObject.size
Here, number represents the password field width in characters. The default width is 20 characters.
Return Value
The size property returns a number representing the width of the password field in characters.
Example − Setting Password Size
Following example demonstrates how to dynamically change the size of a password input field −
<!DOCTYPE html>
<html>
<head>
<title>Input Password Size Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Input Password Size Property</h2>
<label for="PASS1">Password: </label>
<input type="password" id="PASS1" placeholder="Enter password">
<p>Change the password field width by clicking the button below:</p>
<button onclick="changeSize()">Increase Size</button>
<button onclick="resetSize()">Reset Size</button>
<p id="Sample">Current size: 20 characters (default)</p>
<script>
function changeSize() {
var passwordField = document.getElementById("PASS1");
passwordField.size += 10;
var currentSize = passwordField.size;
document.getElementById("Sample").innerHTML = "Current size: " + currentSize + " characters";
}
function resetSize() {
var passwordField = document.getElementById("PASS1");
passwordField.size = 20;
document.getElementById("Sample").innerHTML = "Current size: 20 characters (default)";
}
</script>
</body>
</html>
The output shows a password field that increases in width when the "Increase Size" button is clicked −
Password: [????????????????????] (default 20 chars width) Change the password field width by clicking the button below: [Increase Size] [Reset Size] Current size: 20 characters (default) After clicking "Increase Size": Password: [??????????????????????????????] (30 chars width) Current size: 30 characters
Example − Getting Password Size
Following example demonstrates how to retrieve the current size of a password input field −
<!DOCTYPE html>
<html>
<head>
<title>Get Password Size</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Get Password Size Property</h2>
<label for="PASS2">Password: </label>
<input type="password" id="PASS2" size="25" placeholder="25 character width">
<br><br>
<button onclick="getSize()">Get Current Size</button>
<p id="Result"></p>
<script>
function getSize() {
var passwordField = document.getElementById("PASS2");
var currentSize = passwordField.size;
document.getElementById("Result").innerHTML = "The password field size is: " + currentSize + " characters";
}
</script>
</body>
</html>
The output displays the current size when the button is clicked −
Password: [?????????????????????????] (25 chars width) [Get Current Size] The password field size is: 25 characters
How It Works
The size property works by −
Setting the visual width − The size property determines how many characters are visible in the password field without scrolling.
Character-based measurement − The width is measured in average character widths, not pixels.
Dynamic modification − You can change the size at runtime using JavaScript to make the field larger or smaller.
Default behavior − If no size is specified, most browsers default to 20 characters width.
Key Points
The size property only affects the visual width of the input field, not the maximum number of characters that can be entered.
To limit the actual number of characters, use the
maxlengthattribute instead.The size is measured in average character widths, so the actual pixel width may vary depending on the font.
The property accepts positive integer values only.
Conclusion
The HTML DOM Input Password size property provides a way to control the visual width of password input fields. It can be set or retrieved using JavaScript, allowing for dynamic adjustment of the field size based on user interactions or application requirements. The size is measured in characters, with a default value of 20.
228 Views
