HTML DOM Input Search defaultValue प्रॉपर्टी

HTML DOM Input Search defaultValue प्रॉपर्टी का उपयोग सर्च फील्ड के defaultValue को सेट या प्राप्त करने के लिए किया जाता है। किसी एलिमेंट का defaultValue वह मान होता है जो value एट्रिब्यूट को असाइन किया जाता है। value और defaultValue प्रॉपर्टी के बीच अंतर यह है कि defaultValue प्रॉपर्टी मूल डिफ़ॉल्ट मान को बरकरार रखती है जबकि value प्रॉपर्टी मान सर्च फील्ड में यूजर इनपुट के आधार पर बदलता है।

सिंटैक्स

DefaultValue प्रॉपर्टी सेट करने का सिंटैक्स:

searchObject.defaultValue = value

यहां, "value" सर्च फील्ड का डिफ़ॉल्ट मान है।

उदाहरण

Search defaultValue प्रॉपर्टी का एक उदाहरण देखते हैं:

<!DOCTYPE html> <html> <body> 
<h1>Input Search defaultValue Property</h1> 
<form> 
  FRUITS: <input type="search" id="SEARCH1" name="fruits" value="MANGO"> 
</form> 
<p>CHANGE बटन पर क्लिक करके ऊपर वाले सर्च फील्ड का डिफ़ॉल्ट मान बदलें</p> 
<button type="button" onclick="changeDefault()">CHANGE</button> 
<p id="Sample"></p> 
<script> 
  function changeDefault() { 
    document.getElementById("SEARCH1").defaultValue = "APPLE"; 
    var P = document.getElementById("SEARCH1").defaultValue; 
    document.getElementById("Sample").innerHTML = "Default value has been changed from MANGO to " + P; 
  } 
</script> 
</body> </html>

आउटपुट

यह निम्नलिखित आउटपुट उत्पन्न करेगा:

HTML DOM Input Search defaultValue प्रॉपर्टी

CHANGE बटन पर क्लिक करने पर:

HTML DOM Input Search defaultValue प्रॉपर्टी

उदाहरण की व्याख्या

हमने पहले type="search", id="SEARCH1", name="fruits" वाला एक <input> एलिमेंट बनाया और इसका value एट्रिब्यूट "MANGO" पर सेट है। सर्च फील्ड एक फॉर्म के अंदर है।
फिर हम एक CHANGE बटन बनाते हैं जो यूजर द्वारा क्लिक किए जाने पर changeDefault() मेथड को एक्जीक्यूट करता है।
changeDefault() मेथड getElementById() मेथड का उपयोग करके type search वाले इनपुट फील्ड को प्राप्त करता है और इसकी defaultValue प्रॉपर्टी को "APPLE" पर सेट करता है। फिर हम getElementById() मेथड का उपयोग करके फिर से type search वाले इनपुट की defaultValue प्रॉपर्टी प्राप्त करते हैं और इसे variable P में असाइन करते हैं। यह variable फिर पैराग्राफ की innerHTML प्रॉपर्टी का उपयोग करके id "Sample" वाले पैराग्राफ में प्रदर्शित किया जाता है।

function changeDefault() { 
  document.getElementById("SEARCH1").defaultValue = "APPLE"; 
  var P = document.getElementById("SEARCH1").defaultValue; 
  document.getElementById("Sample").innerHTML = "Default value has been changed from MANGO to " + P; 
}