मैं jQuery के साथ <input type = "text"> का ऑनक्रास कैसे लागू करूं?

Question

<select>इस एपीआई है। किस बारे में <input>?

Answer 1

आप उपयोग कर सकते हैं .change()

$('input[name=myInput]').change(function() { ... });

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

अगर वह बहुत सही आप के लिए नहीं है, आप अन्य से कुछ का उपयोग कर सकता है jQuery की घटनाओं की तरह KeyUp , keydown या कुंजी दबाने - आप चाहते हैं सही प्रभाव पर निर्भर करता है।

Comments

दुर्भाग्य से, यह एक छिपे हुए इनपुट के लिए काम नहीं करता है। एक छिपे हुए इनपुट पर एक ऑन्चेंज की आवश्यकता होने पर एक संभावित समाधान है: <input type = 'text' style = 'display: none' /> (css के साथ) ..

— NickGreen

ध्यान दें कि changeकेवल आग लग जाएगी जब इनपुट तत्व ने फोकस खो दिया है। वहाँ भी inputघटना है जो पाठ बॉक्स जब भी यह ध्यान खोने की जरूरत के बिना अद्यतन करता है आग। प्रमुख घटनाओं के विपरीत यह पाठ को चिपकाने / खींचने के लिए भी काम करता है।

— pimvdb

शानदार टिप्पणी @pimvdb मैंने इसका उपयोग किया, और इस प्रश्न के उत्तर में बदल दिया।

— iPadDeveloper2011

जैसा कि मैं यह कोशिश कर रहा हूं, और अभी-अभी सीखा है कि घटना केवल तभी फायर करती है जब दो स्थितियां पूरी होती हैं: 1) मूल्य परिवर्तन; और 2) कलंक, मुझे आश्चर्य है कि क्या बहुत से लोग बदलाव की उम्मीद करते हैं () कीप द्वारा बेहतर तरीके से नियंत्रित किया जाता है ()?

— तारकुस

जैसा कि changeIE9 द्वारा समर्थित नहीं है, आप focusout

— सोमा

Answer 2

जैसा @pimvdb ने अपनी टिप्पणी में कहा,

ध्यान दें कि परिवर्तन केवल तभी होगा जब इनपुट तत्व ने अपना ध्यान खो दिया हो। इनपुट ईवेंट भी है जो फ़ोकस को खोने की आवश्यकता के बिना जब भी टेक्स्टबॉक्स अपडेट करता है तो आग लग जाती है। प्रमुख घटनाओं के विपरीत यह पाठ को चिपकाने / खींचने के लिए भी काम करता है।

( प्रलेखन देखें ।)

यह इतना उपयोगी है, यह एक जवाब में डालने लायक है। वर्तमान में (v1.8 *?) वहाँ है .input () सुविधा fn jquery में, इसलिए इसे करने का तरीका

$('input.myTextInput').on('input',function(e){
 alert('Changed!')
});

Comments

विशेष रूप से, IE <9 बिल्कुल भी समर्थन नहीं करता है।

— dlo

आप कई घटनाओं के लिए बाध्य कर सकते हैं के बाद से $('form').on('change input', function);मेरे लिए चाल है। धन्यवाद।

— justnorris

@Norris। जब एक तत्व (1) को बदल दिया जाता है, और फोकस (2) खो देता है, तो संभवत: दो बार आग लग जाएगी। यह कई उद्देश्यों के लिए एक समस्या नहीं है, लेकिन फिर भी ध्यान देने योग्य है।

— iPadDeveloper2011

IE9 में परीक्षण किया गया, बैकस्पेस को निकाल नहीं दिया जाएगा

— Jaskey

ध्यान दें, यह किए गए प्रत्येक इनपुट परिवर्तन के लिए आग लगाएगा (जो आप देख रहे हैं वह हो सकता है)। लेकिन, अगर आप "जब बदल रहा है" जैसी घटना की तलाश कर रहे हैं, तो यहां एक बढ़िया उदाहरण है ।

— ट्रेवर नेस्टमैन 16

Answer 3

मैं नीचे की तरह कीअप इवेंट का उपयोग करने का सुझाव दूंगा:

$('elementName').keyup(function() {
 alert("Key up detected");
});

उसी परिणाम को प्राप्त करने के कुछ तरीके हैं, इसलिए मुझे लगता है कि यह वरीयता के लिए नीचे है और इस पर निर्भर करता है कि आप इसे कैसे ठीक से काम करना चाहते हैं।

अपडेट: यह केवल मैनुअल इनपुट के लिए काम करता है कॉपी और पेस्ट नहीं।

कॉपी और पेस्ट के लिए मैं निम्नलिखित की सिफारिश करूंगा:

$('elementName').on('input',function(e){
 // Code here
});

Comments

मैं निश्चित रूप से पाठ इनपुट के लिए इसे सुझाता हूं!

— वरकस

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

— celicni

इसके अलावा, चेकबॉक्स पर कब्जा करने के लिए अभी भी परिवर्तन की आवश्यकता प्रतीत होती है

— Turbo2oh

Answer 4

यहाँ मैं उपयोग कोड है:

$("#tbSearch").on('change keyup paste', function () {
    ApplyFilter();
});

function ApplyFilter() {
    var searchString = $("#tbSearch").val();
    //  ... etc...
}

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

यह काफी अच्छी तरह से काम करता है, खासकर जब एक jqGridनियंत्रण के साथ जोड़ा जाता है । आप बस एक टेक्स्टबॉक्स में टाइप कर सकते हैं और तुरंत अपने में परिणाम देख सकते हैं jqGrid।

Answer 5

ऐसा करने के लिए एक और केवल एक विश्वसनीय तरीका है , और यह एक अंतराल में मूल्य को खींचकर एक कैश्ड मूल्य से तुलना करना है।

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

सौभाग्य से, jQuery में घटना के बुनियादी ढांचे के लिए धन्यवाद, अपने स्वयं के इनपुटचेंज घटना को जोड़ना काफी आसान है। मैंने यहाँ ऐसा किया:

$.event.special.inputchange = {
    setup: function() {
        var self = this, val;
        $.data(this, 'timer', window.setInterval(function() {
            val = self.value;
            if ( $.data( self, 'cache') != val ) {
                $.data( self, 'cache', val );
                $( self ).trigger( 'inputchange' );
            }
        }, 20));
    },
    teardown: function() {
        window.clearInterval( $.data(this, 'timer') );
    },
    add: function() {
        $.data(this, 'cache', this.value);
    }
};

इसका उपयोग करें जैसे: $('input').on('inputchange', function() { console.log(this.value) });

यहाँ एक डेमो है: http://jsfiddle.net/LGAWY/

यदि आप कई अंतरालों से डरते हैं, तो आप इस ईवेंट को focus/ पर बाँध / अनबाइंड कर सकते हैं blur।

Comments

क्या आपके कोड को इस तरह बनाना संभव है $('body').on('inputchange', 'input', function() { console.log(this.value) });:? या नहीं, जैसा कि यहाँ बताया गया है: github.com/EightMedia/hammer.js/pull/98 ?

— TheFrost

इस तरह के कोड को लिखना और लॉन्च करना चरम प्रदर्शन प्रभाव के साथ पागलपन है।

— डेन्यूबियन नाविक

@ AboutukaszLech कृपया, इसके बारे में मुझे बताएं। लेकिन अगर आप फोकस / ब्लर घटनाओं को हिट करते हैं जैसा कि मैंने भी उल्लेख किया है, तो अंतराल केवल अस्थायी रूप से चलेगा। निश्चित रूप से, 1988 से एक इंटेल 386 भी एक अंतराल को संभाल सकता है?

— डेविड हेस्टिंग्स

Answer 6

<input id="item123" class="firstName" type="text" value="Hello there" data-someattr="CoolExample" />

$(".firstName").on('change keyup paste', function () {
   var element = $(this);
   console.log(element);
   var dataAttribute = $(element).attr("data-someattr");
   console.log("someattr: " + dataAttribute );
});

मैं thisपूरे तत्व तक पहुंचने के लिए कीवर्ड का उपयोग करने की सलाह देता हूं ताकि आप इस तत्व के साथ अपनी जरूरत का हर काम कर सकें।

Answer 7

यदि यह डायनेमिक / अजाक्स कॉल है तो भी निम्नलिखित कार्य करेगा।

स्क्रिप्ट:

jQuery('body').on('keyup','input.addressCls',function(){
  console.log('working');
});

एचटीएमएल,

<input class="addressCls" type="text" name="address" value="" required/>

मुझे उम्मीद है कि यह कार्य कोड किसी ऐसे व्यक्ति की मदद करेगा जो गतिशील रूप से / अजाक्स कॉल का उपयोग करने की कोशिश कर रहा है ...

Answer 8

$("input").keyup(function () {
    alert("Changed!");
});

Answer 9

आप बस आईडी के साथ काम कर सकते हैं

$("#your_id").on("change",function() {
    alert(this.value);
});

Comments

यह मौजूदा उत्तरों में बहुत कुछ नहीं जोड़ता है।

— पैंग

Answer 10

आप इसे अलग-अलग तरीकों से कर सकते हैं, कीप उनमें से एक है। लेकिन मैं बदलाव के साथ नीचे उदाहरण दे रहा हूं।

$('input[name="vat_id"]').on('change', function() {
    if($(this).val().length == 0) {
        alert('Input field is empty');
    }
});

NB: इनपुट [नाम = "vat_id"] अपने इनपुट आईडी या नाम से बदलें ।

Answer 11

यदि आप घटना को टाइप करना चाहते हैं , तो निम्न का उपयोग करें:

$('input[name=myInput]').on('keyup', function() { ... });

यदि आप इनपुट फ़ील्ड छोड़ने पर ईवेंट को ट्रिगर करना चाहते हैं , तो निम्न का उपयोग करें:

$('input[name=myInput]').on('change', function() { ... });

Comments

किसी कारण से यह मेरे लिए काम नहीं किया, लेकिन यह किया:$(document).on('change', 'input[name=myInput]', function() { ... });

— स्टीफन

@Tefan, आपके उदाहरण के कोड को इवेंट डेलिगेशन कहा जाता है। पेज इनिशियलाइज़ेशन के बाद आपका इनपुट फ़ील्ड जुड़ रहा होगा, इसीलिए मेरा कोड आपके काम नहीं आया।

— उस्मान अहमद

Answer 12

$("input").change(function () {
    alert("Changed!");
});

Comments

इस विकल्प की समस्या यह है कि केवल तब काम करता है जब आपने इनपुट फ़ोकस खो दिया हो

— यस

यह अभी भी कुछ मामलों में फिट होगा।

— जेम्स ड्रिंकर्ड

Answer 13

इसने मेरे लिए काम किया। नाम के साथ क्षेत्र हैं fieldA क्लिक किया जाता है या किसी कुंजी में प्रवेश किया यह आईडी के साथ क्षेत्र को अद्यतन करता fieldB ।

jQuery("input[name='fieldA']").on("input", function() {
    jQuery('#fieldB').val(jQuery(this).val());
});

Answer 14

आप उपयोग कर सकते हैं .keypress()।

उदाहरण के लिए, HTML पर विचार करें:

<form>
  <fieldset>
    <input id="target" type="text" value="Hello there" />
  </fieldset>
</form>
<div id="other">
  Trigger the handler
</div>

ईवेंट हैंडलर इनपुट फ़ील्ड के लिए बाध्य हो सकता है:

$("#target").keypress(function() {
  alert("Handler for .keypress() called.");
});

मैं एंडी के साथ पूरी तरह से सहमत हूं; सभी इस बात पर निर्भर करते हैं कि आप इसे कैसे काम करना चाहते हैं।

Comments

यह कॉपी / पेस्ट ऑपरेशन के लिए काम नहीं करता है। यदि पाठ को माउस क्लिक से चिपकाया जाता है, तो कोई घटना नहीं है।

— डेवनी 59