HTML DOM Input Number placeholder Property
HTML DOM input number placeholder property संख्या इनपुट फील्ड के placeholder attribute का मान प्राप्त या संशोधित करता है। प्लेसहोल्डर वह संकेत टेक्स्ट होता है जो इनपुट खाली होने पर दिखाई देता है।
Syntax
Placeholder प्राप्त करना:
numberInputObject.placeholder
Placeholder सेट करना:
numberInputObject.placeholder = "text"
उदाहरण
आयु इनपुट फील्ड जहां बटन क्लिक करके प्लेसहोल्डर टेक्स्ट बदला जाता है:
<!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>नमस्ते, अपनी आयु दर्ज करें:</p>
<input type="number" class="numberInput" placeholder="अपनी आयु दर्ज करें">
<button type="button" onclick="change()" class='btn'>प्लेसहोल्डर बदलें</button>
<script>
function change() {
var numberInput = document.querySelector(".numberInput");
numberInput.placeholder = "कृपया अपनी आयु दर्ज करें";
}
</script>
</body>
</html>
आउटपुट
प्रारंभ में प्लेसहोल्डर "अपनी आयु दर्ज करें" दिखाता है। "प्लेसहोल्डर बदलें" बटन पर क्लिक करने पर यह "कृपया अपनी आयु दर्ज करें" में बदल जाता है।
मुख्य बिंदु
placeholderउपयोगकर्ता को संकेत देता है कि इनपुट में क्या दर्ज करना है- यह लेबल (
<label>) का विकल्प नहीं है - एक्सेसिबिलिटी के लिए लेबल आवश्यक है - प्लेसहोल्डर टेक्स्ट तब गायब होता है जब उपयोगकर्ता टाइप करना शुरू करता है
- JavaScript से डायनामिकली प्लेसहोल्डर बदला जा सकता है
- संख्या इनपुट के लिए प्लेसहोल्डर में प्रारूप संकेत दे सकते हैं (जैसे: "YYYY-MM-DD")