html <इनपुट प्रकार = "टेक्स्ट" /> ऑनकॉन्ग इवेंट काम नहीं कर रहा है

Question 1

मैं कुछ प्रयोग करने की कोशिश कर रहा हूं। मैं जो कुछ भी करना चाहता हूं वह यह है कि हर बार टेक्स्टबॉक्स में उपयोगकर्ता कुछ टाइप करता है, यह एक डायलॉग बॉक्स में प्रदर्शित होगा। मैंने onchangeइसे बनाने के लिए इवेंट प्रॉपर्टी का उपयोग किया, लेकिन यह काम नहीं करता है। मुझे अभी भी इसे काम करने के लिए सबमिट बटन दबाना होगा। मैं AJAX के बारे में पढ़ता हूं और मैं इस बारे में जानने के लिए सोच रहा हूं। क्या मुझे अभी भी काम करने के लिए AJAX की आवश्यकता है या सरल जावास्क्रिप्ट पर्याप्त है? कृपया मदद करे।

index.php

<script type="text/javascript" src="javascript.js"> </script>

<form action="index.php" method="get">
 Integer 1: <input type="text" id="num1" name="num1" onchange="checkInput('num1');" /> <br />
 Integer 2: <input type="text" id="num2" name="num2" onchange="checkInput('num2');" /> <br />
 <input type="submit" value="Compute" />
</form>

javascript.js

function checkInput(textbox) {
 var textInput = document.getElementById(textbox).value;

 alert(textInput); 
}

Question 2

onchangeकेवल तभी चालू होता है जब नियंत्रण धुंधला हो जाता है। onkeypressइसके बजाय कोशिश करें ।

Question 3

.on('input'...JQuery के 1.7 और इसके बाद के संस्करण (इनपुट, कीप, आदि) के लिए हर बदलाव की निगरानी के लिए उपयोग करें ।

स्थिर और गतिशील इनपुट के लिए:

$(document).on('input', '.my-class', function(){
    alert('Input changed');
});

केवल स्थैतिक इनपुट के लिए:

$('.my-class').on('input', function(){
    alert('Input changed');
});

JSFiddle स्थिर / गतिशील उदाहरण के साथ: https://jsfiddle.net/op0zqrgy/7/

Question 4

कीस्ट्रोक्स के लिए जाँच केवल एक आंशिक समाधान है, क्योंकि माउस क्लिक का उपयोग करके इनपुट क्षेत्र की सामग्री को बदलना संभव है। यदि आप एक टेक्स्ट फ़ील्ड में राइट-क्लिक करते हैं, तो आपके पास कट और पेस्ट के विकल्प होंगे जिन्हें आप काइस्ट्रोकेक बिना मूल्य बदलने के लिए उपयोग कर सकते हैं। इसी तरह, यदि स्वत: पूर्ण सक्षम है, तो आप किसी फ़ील्ड में लेफ्ट-क्लिक कर सकते हैं और पहले से दर्ज किए गए टेक्स्ट का ड्रॉपडाउन प्राप्त कर सकते हैं, और आप माउस क्लिक का उपयोग करके अपनी पसंद में से चयन कर सकते हैं। कीस्ट्रोक फंसने से इस प्रकार के परिवर्तनों का पता नहीं लगेगा।

अफसोस की बात है कि कोई भी "ऑनकॉन्ग" घटना नहीं है जो रिपोर्ट तुरंत बदल जाती है, कम से कम जहां तक मुझे पता है। लेकिन एक समाधान है जो सभी मामलों के लिए काम करता है: setInterval () का उपयोग करके एक समय घटना सेट करें।

मान लें कि आपके इनपुट फ़ील्ड में एक आईडी और "शहर" का नाम है:

<input type="text" name="city" id="city" />

"शहर" नामक एक वैश्विक चर है:

var city = "";

इसे अपने पेज इनिशियलाइज़ेशन में जोड़ें:

setInterval(lookForCityChange, 100);

फिर एक लुक को परिभाषित करेंCityChange () फ़ंक्शन:

function lookForCityChange()
{
    var newCity = document.getElementById("city").value;
    if (newCity != city) {
        city = newCity;
        doSomething(city);     // do whatever you need to do
    }
}

इस उदाहरण में, हर 100 मिलीसेकंड में "शहर" का मूल्य जांचा जाता है, जिसे आप अपनी आवश्यकताओं के अनुसार समायोजित कर सकते हैं। यदि आप पसंद करते हैं, तो लुकफ़ॉरसिटीसचेंज () को परिभाषित करने के बजाय एक अनाम फ़ंक्शन का उपयोग करें। ध्यान रखें कि आपका कोड या यहां तक कि ब्राउज़र इनपुट फ़ील्ड के लिए एक प्रारंभिक मूल्य प्रदान कर सकता है ताकि आपको उपयोगकर्ता द्वारा कुछ भी होने से पहले "परिवर्तन" के बारे में सूचित किया जा सके; अपने कोड को आवश्यकतानुसार समायोजित करें।

यदि एक सेकंड के हर दसवें भाग में होने वाली टाइमिंग इवेंट का विचार अस्वाभाविक लगता है, तो आप इनपुट फ़ील्ड प्राप्त होने पर टाइमर को आरंभ कर सकते हैं और इसे ब्लर पर (ClearInterval () के साथ) समाप्त कर सकते हैं। मुझे नहीं लगता कि फोकस प्राप्त किए बिना किसी इनपुट फ़ील्ड के मूल्य को बदलना संभव है, इसलिए इस फैशन में टाइमर को चालू और बंद करना सुरक्षित होना चाहिए।

Question 5

HTML5oninput सभी प्रत्यक्ष परिवर्तनों को पकड़ने के लिए एक घटना को परिभाषित करता है । इससे मेरा काम बनता है।

Question 6

onchange केवल तब होता है जब इनपुट तत्व में परिवर्तन उपयोगकर्ता द्वारा किया जाता है, अधिकांश समय ऐसा होता है जब तत्व फोकस खो देता है।

यदि आप चाहते हैं कि आपका फ़ंक्शन हर बार आग लगने के कारण आपके द्वारा उपयोग किए जाने वाले तत्व मान में बदलाव करे oninput- तो यह कुंजी अप / डाउन घटनाओं से बेहतर है क्योंकि मूल्य को उपयोगकर्ता के माउस के साथ बदला जा सकता है, अर्थात इसमें चिपकाया जा सकता है, या ऑटो-फिल इत्यादि।

परिवर्तन कार्यक्रम के बारे में यहाँ पढ़ें

इनपुट ईवेंट के बारे में यहां और पढ़ें

Question 7

"onchange" के बजाय निम्नलिखित घटनाओं का उपयोग करें

- onkeyup(event)
- onkeydown(event)
- onkeypress(event)

Question 8

सबसे पहले, क्या 'काम नहीं करता है'? क्या आपको अलर्ट नहीं दिख रहा है?

साथ ही, आपके कोड को सरल बनाया जा सकता है

<input type="text" id="num1" name="num1" onkeydown="checkInput(this);" /> <br />

function checkInput(obj) {
    alert(obj.value); 
}

Question 9

मुझे उन मुद्दों का सामना करना पड़ा जहां सफारी एक पाठ इनपुट क्षेत्र पर "ऑन्चेंज" घटनाओं को फायरिंग नहीं कर रहा था। मैंने jQuery 1.7.2 "परिवर्तन" ईवेंट का उपयोग किया और यह या तो काम नहीं किया। मैंने ZURB के टैक्स्टचेंज इवेंट का उपयोग करके समाप्त किया। यह माउस के साथ काम करता है और मैदान छोड़ने के बिना आग लगा सकता है:
http://www.zurb.com/playground/jquery-text-change-custom-event

$('.inputClassToBind').bind('textchange', function (event, previousText) {
    alert($(this).attr('id'));
});

Question 10

कुछ टिप्पणियां जो IMO महत्वपूर्ण हैं:

जब तक USER क्रिया ENTER या ब्लर प्रतीक्षारत सही व्यवहार नहीं है, तब तक इनपुट तत्व 'परिवर्तन' ईवेंट का उत्सर्जन नहीं करते हैं ।
जिस घटना का आप उपयोग करना चाहते हैं, वह है "input"(" ऑनिनपुट ")। यहाँ दोनों के बीच भिन्नता को अच्छी तरह से प्रदर्शित किया गया है: https://javascript.info/events-change-input
दो ईवेंट दो अलग-अलग उपयोगकर्ता इशारों / क्षणों ("इनपुट" ईवेंट का अर्थ है कि उपयोगकर्ता चयन सूची विकल्पों को लिख या नेविगेट कर रहा है, लेकिन फिर भी परिवर्तन की पुष्टि नहीं करता है। "परिवर्तन" का अर्थ है कि उपयोगकर्ता ने मान बदल दिया है) हमारी)
इस तरह की सिफारिश की कई महत्वपूर्ण घटनाओं के लिए सुनना इस मामले में एक बुरा अभ्यास है। (जैसे इनपुट पर ENTER के डिफ़ॉल्ट व्यवहार को संशोधित करने वाले लोग) ...
jQuery का इससे कोई लेना-देना नहीं है। यह सब HTML मानक में है।
यदि आपको यह समझने में समस्या है कि यह सही व्यवहार क्यों है, तो शायद उपयोगी है, प्रयोग के रूप में, माउस / पैड के बिना अपने टेक्स्ट एडिटर या ब्राउज़र का उपयोग करें, बस एक कीबोर्ड।

मेरे दो सेंट।

Question 11

onkeyup ने मेरे लिए काम किया। बैक स्पेस दबाने पर onkeypress ट्रिगर नहीं होता है।

Question 12

इसके onchange(event)साथ उपयोग करना बेहतर है <select>। <input>आप नीचे घटना के साथ उपयोग कर सकते हैं:

- onkeyup(event)
- onkeydown(event)
- onkeypress(event)

Question 13

कोशिश करो onpropertychange। यह केवल IE के लिए काम करता है।