जावास्क्रिप्ट से HTML एलिमेंट में oninput एट्रिब्यूट कैसे जोड़ें?

परिचय

जावास्क्रिप्ट का उपयोग करके किसी HTML एलिमेंट पर oninput इवेंट लिस्टनर जोड़ने के लिए, addEventListener('input', handler) का उपयोग करें। input इवेंट तब ट्रिगर होता है जब एलिमेंट का मान बदलता है (टाइपिंग, पेस्टिंग, आदि)।

उदाहरण

<!DOCTYPE html> <html lang="hi"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>oninput इवेंट</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> </head> <body> <label> मान दर्ज करें:</label> <input id="enterValue" type="text"> </body> <script> document.getElementById('enterValue').addEventListener('input', function() { console.log('आपने मान दर्ज किया:', this.value); }); </script> </html>

आउटपुट

जब यूज़र मान दर्ज करता है:

चलाने के निर्देश

उपरोक्त प्रोग्राम को चलाने के लिए, फ़ाइल का नाम anyName.html (index.html) सेव करें और फ़ाइल पर राइट-क्लिक करके VS कोड एडिटर में "Open with Live Server" विकल्प चुनें।

input vs change इवेंट

इनपुट इवेंट ऑब्जेक्ट

element.addEventListener('input', (event) => {
  console.log(event.target.value);    // वर्तमान मान
  console.log(event.inputType);       // 'insertText', 'deleteContentBackward', आदि
  console.log(event.data);            // डाला गया टेक्स्ट (यदि लागू हो)
});