The DOM Input Number placeholder Property in HTML DOM is used to set or return the value of the placeholder attribute of a number field. The placeholder attribute specifies the short hint that describes the expected value of an input field. The short hint is displayed in the field before the user enters a value.
Syntax:
- It returns the Input number Placeholder property.
numberObject.placeholder
- It is used to set Input number Placeholder property.
numberObject.placeholder = text
Property Value: It contains single value text which is used to define a short hint that describes an expected value of the number Field.
Return Value: It returns a string value which represented a short hint that describes the expected value of the number Field.
Example 1: This example illustrates how to return Input number Placeholder property.
<!DOCTYPE html><html>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>DOM Input Number placeholder Property</h2>
<input type="number" id="myNumber" step="5"
placeholder="multiples of 5">
<br><br>
<button onclick="myFunction()">
Click Here!
</button>
<p id="demo" style="font-size:23px;color:green;"></p>
<script>
function myFunction() {
// return the Input number placeholder Property
var x =
document.getElementById("myNumber").placeholder;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
|
Output:
Before Clicking On Button:
After Clicking On Button:
Example-2: This Example illustrates how to set the Input number placeholder Property.
<!DOCTYPE html><html>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>DOM Input Number placeholder Property</h2>
<input type="number" id="myNumber" step="5"
placeholder="multiples of 5">
<br><br>
<button onclick="myFunction()">
Click Here!
</button>
<p id="demo" style="font-size:23px;color:green;"></p>
<script>
function myFunction() {
// set the Input number placeholder Property
var x =
document.getElementById("myNumber").placeholder = "10";
document.getElementById("demo").innerHTML =
"The value of the placeholder attribute was changed to " + x;
}
</script>
</body>
</html>
|
Output:
Before Clicking On Button:
After Clicking On Button:
Supported Browsers: The browser supported by DOM input number placeholderProperty are listed below:
- Google Chrome
- Edge 12 and above
- Firefox
- Opera
- Safari