HTML onchange इवेंट एट्रिब्यूट

परिचय

HTML onchange इवेंट एट्रिब्यूट तब ट्रिगर होता है जब आप HTML दस्तावेज़ में किसी HTML एलिमेंट के मान को बदलते हैं। यह फॉर्म एलिमेंट्स (<input>, <select>, <textarea>) पर सबसे अधिक उपयोग किया जाता है।

सिंटैक्स

<tagname onchange="script"></tagname>

उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
  body {
    color: #000;
    height: 100vh;
    background-color: #FBAB7E;
    background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
    text-align: center;
    font-family: Arial, sans-serif;
    padding: 20px;
  }
  .show {
    font-size: 1.1rem;
    margin: 1rem auto;
    font-weight: bold;
  }
  select {
    height: 2rem;
    width: 30%;
    font-size: 1rem;
    background: transparent;
    border: 2px solid #fff;
    outline: none;
    border-radius: 4px;
    padding: 0 10px;
  }
</style>
</head>
<body>
<h1>HTML onchange इवेंट एट्रिब्यूट डेमो</h1>
<p>अपना पसंदीदा विषय चुनें:</p>
<select onchange="handleChange()">
  <option value="physics">भौतिकी</option>
  <option value="chemistry">रसायन विज्ञान</option>
  <option value="maths">गणित</option>
</select>
<div class="show"></div>
<script>
  function handleChange() {
    const select = document.querySelector("select");
    const msg = document.querySelector('.show');
    msg.innerHTML = "वर्तमान मान है: " + select.value;
  }
</script>
</body>
</html>

आउटपुट

एक ड्रॉपडाउन सूची दिखाई देगी। जब उपयोगकर्ता मान बदलता है, तो चयनित मान नीचे प्रदर्शित होगा।

onchange कब ट्रिगर होता है

onchange vs oninput

• onchange: मान बदलने और फोकस खोने पर (या सेलेक्ट/चेकबॉक्स पर तुरंत)। कम बार ट्रिगर होता है।
• oninput: हर कीस्ट्रोक/मान परिवर्तन पर तुरंत। रियल-टाइम फीडबैक के लिए।

उपयोग के मामले

• फॉर्म वैलिडेशन (फील्ड छोड़ने पर)
• ड्रॉपडाउन चयन के आधार पर अन्य फील्ड्स अपडेट करना
• ऑटो-सेव फंक्शनैलिटी
• निर्भर ड्रॉपडाउन (देश → राज्य → शहर)

ब्राउज़र समर्थन

सभी ब्राउज़रों में पूर्ण समर्थन।