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 Number placeholder Property
The HTML DOM Input Number placeholder property returns and modifies the value of the placeholder attribute of a number input field. The placeholder provides a hint to the user about what kind of value is expected in the input field.
Syntax
Following is the syntax for returning the placeholder value −
object.placeholder
Following is the syntax for modifying the placeholder value −
object.placeholder = "text"
Parameters
text − A string that specifies the placeholder text to display in the number input field.
Return Value
The property returns a string representing the placeholder text of the number input field.
Example − Getting Placeholder Value
Following example demonstrates how to get the current placeholder value of a number input field −
<!DOCTYPE html>
<html>
<head>
<title>Get Placeholder Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Get Number Input Placeholder</h2>
<p>Enter your age:</p>
<input type="number" id="ageInput" placeholder="Enter age between 1-100">
<button onclick="getPlaceholder()">Get Placeholder</button>
<p id="result"></p>
<script>
function getPlaceholder() {
var input = document.getElementById("ageInput");
var placeholderValue = input.placeholder;
document.getElementById("result").innerHTML = "Current placeholder: " + placeholderValue;
}
</script>
</body>
</html>
The output shows the current placeholder text when the button is clicked −
Current placeholder: Enter age between 1-100
Example − Setting Placeholder Value
Following example demonstrates how to change the placeholder text dynamically −
<!DOCTYPE html>
<html>
<head>
<title>Set Placeholder Property</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
input { padding: 8px; margin: 10px 0; width: 200px; border: 2px solid #ccc; }
button { padding: 8px 16px; margin: 5px; background: #007bff; color: white; border: none; cursor: pointer; }
</style>
</head>
<body>
<h2>Change Number Input Placeholder</h2>
<p>Enter a number:</p>
<input type="number" id="numberInput" placeholder="Enter any number">
<br>
<button onclick="changePlaceholder()">Change to Age</button>
<button onclick="resetPlaceholder()">Reset</button>
<script>
function changePlaceholder() {
document.getElementById("numberInput").placeholder = "Enter your age (1-120)";
}
function resetPlaceholder() {
document.getElementById("numberInput").placeholder = "Enter any number";
}
</script>
</body>
</html>
Clicking "Change to Age" modifies the placeholder text, while "Reset" restores the original placeholder.
Example − Dynamic Placeholder Based on Input
Following example shows how to change placeholder text based on user interaction −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Placeholder</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
select, input { padding: 8px; margin: 10px; border: 1px solid #ddd; }
.container { margin: 20px 0; }
</style>
</head>
<body>
<h2>Dynamic Placeholder Example</h2>
<div class="container">
<label>Select measurement type:</label>
<select id="measureType" onchange="updatePlaceholder()">
<option value="age">Age</option>
<option value="weight">Weight</option>
<option value="height">Height</option>
</select>
</div>
<div class="container">
<input type="number" id="valueInput" placeholder="Enter your age">
</div>
<script>
function updatePlaceholder() {
var select = document.getElementById("measureType");
var input = document.getElementById("valueInput");
switch(select.value) {
case "age":
input.placeholder = "Enter your age (1-120)";
break;
case "weight":
input.placeholder = "Enter weight in kg (1-500)";
break;
case "height":
input.placeholder = "Enter height in cm (50-250)";
break;
}
}
</script>
</body>
</html>
The placeholder text updates automatically when a different measurement type is selected from the dropdown.
Browser Compatibility
The placeholder property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 10+. It is part of the HTML5 specification and widely supported across different platforms.
Key Points
The placeholder property only works with input elements that support placeholder text, including number, text, email, password, and search inputs.
Placeholder text disappears when the user starts typing in the input field.
The placeholder is just a hint and does not replace proper form labels for accessibility.
You can use CSS to style placeholder text using the
::placeholderpseudo-element.The property returns an empty string if no placeholder is set.
Conclusion
The HTML DOM Input Number placeholder property provides a simple way to get and set hint text for number input fields. It enhances user experience by providing guidance on expected input format and can be dynamically updated based on application logic or user interactions.
293 Views
