JQuery में इनपुट परिवर्तन का पता लगाना?

359

घटना .changeपर jquery का उपयोग करते inputसमय केवल तभी निकाल दिया जाएगा जब इनपुट फोकस खो देता है

मेरे मामले में, मुझे इनपुट वैल्यू में परिवर्तन होते ही सेवा को कॉल करना होगा (यदि मान मान्य है तो जाँच करें)। मैं इसे कैसे पूरा कर सकता हूं?

javascript jquery html

— Banshee
स्रोत

3

किस तरह का इनपुट? पाठ बॉक्स? चेकबॉक्स? रेडियो? पाठ क्षेत्र? आइए देखें कि अब तक आप क्या-क्या करते आए हैं

— पेट्रीसिया

क्षमा करें, इसका एक प्रकार का पाठ है। और जैसा कि मैंने कहा, मैंने बदलाव की कोशिश की है, लेकिन यह मेरी ज़रूरत के तरीके को नहीं बताता है (इनपुट में पाठ पर हर बदलाव के लिए)। मैंने कीडाउन की भी कोशिश की है लेकिन इस काम को करने के लिए मुझे ट्रैक को बंद रखना होगा अगर इनपुट "गंदा" है या नहीं।

— बंशी

2

यदि वे एक कुंजी दबा रहे हैं, तो यह 99% समय बदलने वाला है, आप हमेशा उन चाबियों की जांच कर सकते हैं जो इवेंट हैंडलर में नहीं होती हैं।

— पेट्रीसिया

545

स्पष्टीकरण और उदाहरण के लिए अद्यतन

उदाहरण: http://jsfiddle.net/pxfunc/5kpeJ/

विधि 1. inputघटना

आधुनिक ब्राउज़रों में inputघटना का उपयोग करते हैं । जब उपयोगकर्ता टेक्स्ट फ़ील्ड, टाइपिंग, पूर्ववत कर रहा होता है, तो यह घटना आग लग जाएगी, मूल रूप से कभी भी मूल्य एक मान से दूसरे में बदल जाता है।

JQuery में ऐसा करते हैं

$('#someInput').bind('input', function() { 
    $(this).val() // get the current value of the input field.
});

jQuery 1.7 के साथ शुरू, के bindसाथ बदलें on:

$('#someInput').on('input', function() { 
    $(this).val() // get the current value of the input field.
});

विधि 2. keyupघटना

पुराने ब्राउज़रों के लिए keyupईवेंट का उपयोग करें (यह कीबोर्ड पर एक बार कुंजी जारी करने के बाद आग लगाएगा, यह ईवेंट एक प्रकार का गलत पॉज़िटिव दे सकता है क्योंकि जब "w" रिलीज़ होता है तो इनपुट वैल्यू बदल जाती है और keyupईवेंट फ़ायर हो जाता है, लेकिन तब भी जब उपयोग हो "शिफ्ट" कुंजी keyupघटना आग जारी की है, लेकिन इनपुट में कोई बदलाव नहीं किया गया है।) यदि उपयोगकर्ता राइट-क्लिक करता है और संदर्भ मेनू से चिपकता है तो भी यह विधि फायर नहीं करती है:

$('#someInput').keyup(function() {
    $(this).val() // get the current value of the input field.
});

विधि 3. टाइमर ( setIntervalया setTimeout)

keyupआप की सीमाओं के आसपास पाने के लिए एक टाइमर सेट कर सकते हैं समय-समय पर मूल्य में बदलाव का निर्धारण करने के लिए इनपुट के मूल्य की जांच करें। आप इस टाइमर चेक का उपयोग setIntervalया कर सकते हैं setTimeout। इस तो सवाल पर चिह्नित जवाब देखें: jQuery पाठ बॉक्स परिवर्तन घटना या एक काम उदाहरण का उपयोग के लिए बेला को देखने focusऔर blurघटनाओं शुरू करने और एक विशिष्ट इनपुट क्षेत्र के लिए टाइमर को रोकने के लिए

— MikeM
स्रोत

क्या आप इस समाधान के बारे में अधिक बता सकते हैं? मुझे वर्तमान मूल्य कैसे मिलेगा? वर्तमान मूल्य में परिवर्तन किए जाने पर मुझे यह केवल चलाने के लिए कैसे मिलता है?

— बंशी

इनपुट घटना? jQuery में कोई इनपुट ईवेंट नहीं है (अभी तक) ... stackoverflow.com/q/11189136/104380

— vsync

विधि 2 के लिए मैं आमतौर पर कीप और परिवर्तन दोनों से बाँधता हूँ । उन स्थितियों में जहां इनपुट बिना कीपर के होता है (चिपकाने की तरह) यह कम से कम उस घटना को आग देगा जब इनपुट फोकस खो देता है।

— rspeed

1

@AdiDarachi MutationObserver DOM तत्वों में परिवर्तन ट्रैक करेगा। हालाँकि, इनपुट फ़ील्ड में डेटा बदलने वाला उपयोगकर्ता MutationObserver परिवर्तन को ट्रिगर नहीं करता है ... मैं एक परीक्षण केस सेट करता हूं, केवल एक JS कोड परिवर्तन innerTextया valueविशेषता (उपयोगकर्ता इनपुट का अनुकरण) एक MutationObserver ईवेंट jsfun.net/pxfunc/ को ट्रिगर करेगा 04chpws / 1 (MutationObserver ईवेंट लॉगिंग के लिए कंसोल.लॉग देखें)। क्या आपके पास एक अलग परीक्षण मामला है जो मैं देख सकता हूं?

— माइक जुएल

1

जब कोई स्क्रिप्ट मान बदलता है तो यह काम नहीं करता है

— फाल्कोजर

189

यदि आपको HTML5 मिल गया है:

oninput (आग तभी लगती है जब वास्तव में कोई परिवर्तन होता है, लेकिन तुरंत ऐसा होता है)

अन्यथा आपको इन सभी घटनाओं की जांच करने की आवश्यकता है जो इनपुट तत्व के मूल्य में बदलाव का संकेत दे सकती हैं:

onchange
onkeyup( नहीं) keydown या keypressइनपुट के मूल्य अभी तक उस में नई कीस्ट्रोक नहीं होगा के रूप में)
onpaste (जब समर्थित)

और शायद:

onmouseup (मैं इस बारे में निश्चित नहीं हूं)

— एल्निटैक
स्रोत

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

— हेलबाई

82

HTML5 के साथ और jQuery का उपयोग किए बिना, आप inputईवेंट का उपयोग कर सकते हैं :

var input = document.querySelector('input');

input.addEventListener('input', function()
{
    console.log('input changed to: ', input.value);
});

यह हर बार इनपुट के पाठ परिवर्तनों को आग देगा।

IE9 + और अन्य ब्राउज़रों में समर्थित।

यहाँ एक jsFiddle में रहने की कोशिश करें ।

— आकर्षित नोक
स्रोत

1

जब उपयोगकर्ता इनपुट (जैसे बैकस्पेस या डिलीट को दबाकर, या "कट" ऑपरेशन का उपयोग करके) हटाता है , तो अतिरिक्त, IE 9 एक इनपुट ईवेंट को फायर नहीं करता है ।

— xcatliu

1

on परिवर्तन ’केवल धब्बा पर आग लगाता है, न कि जब पाठ बदलता है पाठ परिवर्तनों का पता लगाने के लिए 'इनपुट' घटना का उपयोग करें।

— Dermot Doherty

14

जैसा कि दूसरों ने पहले ही सुझाव दिया है, आपके मामले में समाधान कई घटनाओं को सूँघना है ।
इस काम को करने वाले प्लगइन्स अक्सर निम्नलिखित घटनाओं के लिए सुनते हैं:

$ इनपुट ।ऑन ( 'चेंज कीडाउन कीप मूसडाउन क्लिक माउसअप' , हैंडलर );

यदि आपको लगता है कि यह फिट हो सकता है, तो आप जोड़ सकते हैं focus, blurऔर अन्य घटनाएँ भी।
मैं सुनने के लिए घटनाओं में अधिक नहीं करने का सुझाव देता हूं, क्योंकि यह उपयोगकर्ता की व्यवहार के अनुसार निष्पादित करने के लिए ब्राउज़र मेमोरी आगे की प्रक्रियाओं में लोड करता है।

ध्यान दें: ध्यान दें कि जावास्क्रिप्ट के साथ एक इनपुट तत्व के मूल्य को बदलना (जैसे कि jQuery .val()विधि के माध्यम से ) ऊपर की किसी भी घटना को आग नहीं देगा।
(संदर्भ: https://api.jquery.com/change/ )।

— इमानुएल डेल ग्रांडे
स्रोत

मैं स्वतः पूर्ण के साथ समस्याओं से बचने के लिए फोकस जोड़ने की भी सलाह देता हूं

— बिनार

समझा। मैंने खोज की, और फोकस केवल IE द्वारा और आंशिक रूप से क्रोम द्वारा समर्थित किया गया लगता है, क्या मैं सही हूं?

— इमानुएल डेल ग्रांडे

5

एक हल्के जोड़ के रूप में, jQuery से ईवेंट को फायर करने के लिए आप इसी कार्रवाई को कॉल कर सकते हैं, .val()उदाहरण के लिए इनपुट क्षेत्र पर एक परिवर्तन ईवेंट के लिए, आप कुछ इस तरह करेंगे ... $('#element').val(whatever).change()

— Techknowcrat

2

यदि आप चाहते हैं कि जब भी कुछ तत्व में परिवर्तन किया जाए, तो ईवेंट को निकाल दिया जाए, तो आप कीप इवेंट का उपयोग कर सकते हैं ।

— Jivings
स्रोत

ठीक है, लेकिन यह कमोबेश की-बोर्ड के समान नहीं है? मुझे यह जांचना होगा कि क्या इनपुट स्वयं "गंदा" है?

— बंशी

@SnowJim यदि आप केवल सामान करना चाहते हैं जब इनपुट वास्तव में बदलता है, तो आपको या तो उपयोग करने के लिए मिला है onchange, या राज्य को ट्रैक करना है। keydownकाम नहीं करता है क्योंकि यह इनपुट की स्थिति बदलने से पहले आग हो जाती है।

— अलनीतक

@Alnitak अत्यधिक और यही कारण है कि मैं यहाँ सवाल पूछ रहा हूँ। Onchange काम नहीं कर रहा है, क्या यह केवल इनपुट छोड़ने पर फेंका जाता है।

— बंशी

कमरे में हाथी मोबाइल है। बहुत यकीन है कि कोई भी कीबोर्ड या माउस ईवेंट वहां ज्यादा इस्तेमाल नहीं होगा। : p

— Askdesigners

@Askdesigners Keyup / डाउन इवेंट्स को अभी भी मोबाइल पर उसी अंदाज में काम करना चाहिए।

— जीवािंग्स

2

// .blur तब ट्रिगर होता है जब एलिमेंट फोकस खो देता है

$('#target').blur(function() {
  alert($(this).val());
});

// मैन्युअल रूप से उपयोग करने के लिए ट्रिगर:

$('#target').blur();

— Kszili
स्रोत

1

.change के रूप में मैंने कहा है कि केवल जब फेंक फोकस खो देता है और मूल्य बदल जाता है, तो मुझे इनपुट (पाठ) के रूप में जल्द ही बदलने की आवश्यकता है (जैसे ही इनपुट में पाठ बदल जाता है)। ब्लर केवल तभी ट्रिगर होगा जब इनपुट फोकस खो देता है।

— बंशी

1

की तरह jQuery ईवेंट नहीं है KeyUp और कुंजी दबाने जो आप इनपुट एचटीएमएल तत्वों के साथ उपयोग कर सकते हैं। आप अतिरिक्त रूप से ब्लर () ईवेंट का उपयोग कर सकते हैं ।

— softwaredeveloper
स्रोत

1

.change के रूप में मैंने कहा है कि केवल जब फेंक फोकस खो देता है और मूल्य बदल जाता है, तो मुझे इनपुट (पाठ) के रूप में जल्द ही बदलने की आवश्यकता है (जैसे ही इनपुट में पाठ बदल जाता है)। ब्लर केवल तभी ट्रिगर होगा जब इनपुट फोकस खो देता है।

— बंशी

1

आप किसी keypressईवेंट के दौरान किसी इनपुट के मान को मज़बूती से नहीं देख सकते क्योंकि दबाया गया कुंजी अभी तक उस मान को नहीं बदलेगा।

— अलनीतक

0

यह jQuery 1.7 और इसके बाद के संस्करण के इनपुट में हर परिवर्तन को शामिल करता है:

$(".inputElement").on("input", null, null, callbackFunction);

— rybo111
स्रोत