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
Selected Reading
HTML DOM Input Number placeholder Property
The HTML DOM input number placeholder property returns and modify the value of the placeholder attribute of number input field.
Syntax
Following is the syntax −
Returning placeholder
object.placeholder
Modifying placeholder
object.placeholder = “text”
Example
Let us see an example of HTML DOM input number placeholder property −
<!DOCTYPE html>
<html>
<head>
<style>
html{
height:100%;
}
body{
text-align:center;
color:#fff;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
height:100%;
}
p{
font-weight:700;
font-size:1.1rem;
}
input{
display:block;
width:35%;
border:2px solid #fff;
background-color:transparent;
color:#fff;
font-weight:bold;
padding:8px;
margin:1rem auto;
}
.btn{
background:#0197F6;
border:none;
height:2rem;
border-radius:2px;
width:35%;
margin:2rem auto;
display:block;
color:#fff;
outline:none;
cursor:pointer;
}
</style>
</head>
<body>
<h1>placeholder property Demo</h1>
<p>Hi, Enter your age:</p>
<input type="number" class="numberInput" placeholder="Enter your age">
<button type="button" onclick="change()" class='btn'>Change Placeholder</button>
<script>
function change() {
var numberInput = document.querySelector(".numberInput");
numberInput.placeholder = "Please enter your age";
}
</script>
</body>
</html>
Output
This will produce the following output −
Click on the “Change Placeholder” button to change the value of placeholder.
Updated on: 2020-07-01T09:16:00+05:30
265 Views
Advertisements