मैं jQuery में एक textarea की परिवर्तन घटना के लिए कैसे बांध सकते हैं?

Question

अगर कोई बदलाव हुआ है तो मैं उस पर कब्जा करना चाहता हूं <textarea>। जैसे किसी भी अक्षर (डिलीट करना, बैकस्पेस) या माउस क्लिक और पेस्ट या कट करना। क्या कोई jQuery इवेंट है जो उन सभी घटनाओं के लिए ट्रिगर कर सकता है?

मैंने इवेंट बदलने की कोशिश की, लेकिन यह घटक से टैब आउट करने के बाद ही कॉलबैक को ट्रिगर करता है।

उपयोग करें : यदि <textarea>कोई पाठ है तो मैं एक बटन सक्षम करना चाहता हूं ।

Comments

मुख्य घटनाओं के लिए बाध्य करना पर्याप्त नहीं है क्योंकि पाठ को माउस से बदला जा सकता है (संदर्भ मेनू से "पेस्ट" / "कट" या ड्रैग एंड ड्रॉप)।

— कॉन्सटेंटिन स्मोलिनिन

इसी तरह के सवाल पर Textarea onchange डिटेक्शन पर चर्चा की जाती है ।

— dma_k

Answer 1

वास्तव में यह प्रयास करें:

$('#textareaID').bind('input propertychange', function() {

      $("#yourBtnID").hide();

      if(this.value.length){
        $("#yourBtnID").show();
      }
});

डेमो

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

Comments

@ सेंथिलनाथन: मेरे लिए क्रोम और एफएफ में कोई काम नहीं है क्योंकि यह अभी propertychangeभी नहीं हैinput

— ब्लास्टर

जैसा कि मैंने अभी पता लगाया है कि इन दोनों घटनाओं में से कोई IE9 में आग नहीं लगी है (IE के पुराने संस्करणों की जाँच नहीं की गई है) जब बैकस्पेस कुंजी को एक textarea में दबाया जाता है।

— जप्पा

ये डेमो उपयोग कर रहे हैं <input type="text">, नहीं<textarea>

— बेन कॉलिन्स

'इनपुट प्रॉपर्टीचेंज' को 'इनपुट चेंज' में बदलें ताकि यह IE9 में भी काम करे। paulbakaus.com/2012/06/14/propertychange-on-internet-explorer-9

— c0D3l0g1c

मैं देखता हूं कि आपने DEMO में <input type = "textarea" cols = "10" पंक्तियाँ = "4" /> का प्रयोग किया है, गंभीरता से?

— DrLightman

Answer 2

bindपदावनत किया गया है। उपयोग करें on:

$("#textarea").on('change keyup paste', function() {
    // your code here
});

नोट: उपरोक्त कोड प्रत्येक मिलान ट्रिगर-प्रकार के लिए एक बार, कई बार आग लगाएगा। इसे संभालने के लिए, ऐसा कुछ करें:

var oldVal = "";
$("#textarea").on("change keyup paste", function() {
    var currentVal = $(this).val();
    if(currentVal == oldVal) {
        return; //check to prevent multiple simultaneous triggers
    }

    oldVal = currentVal;
    //action to be performed on textarea changed
    alert("changed!");
});

jsFiddle डेमो

Comments

on("change", function() ....हिस्सा मेरे लिए काम नहीं कर रहा है। किसी भी अलर्ट को ट्रिगर नहीं करता है, न ही कंसोल लॉग, कुछ भी। हालांकि, कीप एक आकर्षण की तरह काम करता है।

— सेबेस्टियनसनो

@Sebastialonso: on("change", function() ... है केवल निकाल दिया जब पाठ क्षेत्र फोकस खो देता है । इसके लिए मेरे पहले के प्रश्न का संदर्भ लें , और इस फिडेल पर इसे आज़माएं - टेक्स्टारिया को बदलें, फिर टेक्सारिया के बाहर क्लिक करें, और आपको परिवर्तन इवेंट फायरिंग को देखना चाहिए।

— SNag

@SNag कोड 45 क्रोम पर काम नहीं कर रहा है, लेकिन यह FF 41 पर काम कर रहा है

— DariusVE

यदि आप संस्करण 1.7 से पहले jQuery का उपयोग कर रहे हैं, हालांकि, तो यह लागू नहीं होता है

— कोड जॉकी

गैर पदावनत समारोह पर उपयोग के लिए upvoting। .Bind () से बेहतर है

— डैनी हार्डिंग

Answer 3

एक inputघटना का उपयोग करें ।

var button = $("#buttonId");
$("#textareaID").on('input',function(e){
  if(e.target.value === ''){
    // Textarea has no value
    button.hide();
  } else {
    // Textarea has a value
    button.show();
  }
});

Comments

Internet Explorer के लिए, इसे ठीक से कार्य करने के लिए 9+ या 10+ की आवश्यकता होती है।

— उदी

यह समाधान एक आकर्षण की तरह काम करता है। पूरी तरह से परिवर्तन की सीमाओं को पार करता है () और कीप () ईवेंट हैंडलर। धन्यवाद एक टन कांटे।

— विकर

Answer 4

इस सवाल को सूत्रों के साथ और अधिक जवाब की आवश्यकता है। यह वास्तव में काम करता है (हालांकि आपको इसके लिए मेरा शब्द नहीं लेना है):

// Storing this jQuery object outside of the event callback 
// prevents jQuery from having to search the DOM for it again
// every time an event is fired.
var $myButton = $("#buttonID")

// input           :: for all modern browsers [1]
// selectionchange :: for IE9 [2]
// propertychange  :: for <IE9 [3]
$('#textareaID').on('input selectionchange propertychange', function() {

  // This is the correct way to enable/disabled a button in jQuery [4]
  $myButton.prop('disabled', this.value.length === 0)

}

1: https://developer.mozilla.org/en-US/docs/Web/Events/input#Browser_compatibility
2: IE9 में oninput जब हम BACKSPACE / DEL / CUT
3 से टकराते हैं तो आग नहीं लगती है : https: // msdn .microsoft.com / en-us / Library / ms536956 (v = vs85) .aspx
4: http://api.jquery.com/prop/#prop-propertyName-function

लेकिन, एक और अधिक वैश्विक समाधान के लिए जिसे आप अपने पूरे प्रोजेक्ट में उपयोग कर सकते हैं , मैं एक नया, क्रॉस-ब्राउज़र संगत ईवेंट प्राप्त करने के लिए टेक्स्टकचेंज jQuery प्लगइन का उपयोग करने की सलाह देता हूं textchange। यह उसी व्यक्ति द्वारा विकसित किया गया था जिसने onChangeफेसबुक के रिएक्टजेएस के लिए बराबर घटना को लागू किया था , जिसे वे अपनी पूरी वेबसाइट के लिए उपयोग करते हैं। और मुझे लगता है कि यह कहना सुरक्षित है, अगर यह फेसबुक के लिए पर्याप्त समाधान है, तो संभवतः यह आपके लिए पर्याप्त मजबूत है। :-)

अद्यतन: यदि आपको इंटरनेट एक्सप्लोरर में ड्रैग एंड ड्रॉप सपोर्ट जैसी सुविधाओं की आवश्यकता होती है, तो आप इसके बजाय pandellहाल ही में अपडेट किए गए कांटे कीjquery-splendid-textchange जांच करना चाहते हैं ।

Comments

हालांकि ऐसा लगता है कि "सिलेक्शनचेंज" केवल दस्तावेज़ पर लागू होने पर ही काम करता है। सक्रिय तत्व को "document.activeElement" के साथ प्राप्त किया जा सकता है।

— tfE

Answer 5

2018, JQUERY के बिना

सवाल JQuery के साथ है , यह सिर्फ FYI है।

जे एस

let textareaID = document.getElementById('textareaID');
let yourBtnID = document.getElementById('yourBtnID');
textareaID.addEventListener('input', function() {
    yourBtnID.style.display = 'none';
    if (textareaID.value.length) {
        yourBtnID.style.display = 'inline-block';
    }
});

एचटीएमएल

<textarea id="textareaID"></textarea>
<button id="yourBtnID" style="display: none;">click me</div>

Answer 6

यहां एक और (आधुनिक) लेकिन पहले उल्लेखित लोगों की तुलना में थोड़ा अलग संस्करण है। IE9 के साथ परीक्षण किया गया:

$('#textareaID').on('input change keyup', function () {
  if (this.value.length) {
    // textarea has content
  } else {
    // textarea is empty
  }
});

पुराने ब्राउज़रों के लिए आप भी जोड़ सकते हैं selectionchangeऔर propertychange(जैसा कि अन्य उत्तरों में उल्लेख किया गया है)। लेकिन selectionchangeIE9 में मेरे लिए काम नहीं किया। इसलिए मैंने जोड़ा keyup।

Answer 7

इसे फोकस के साथ करने की कोशिश करें

$("textarea").focusout(function() {
   alert('textarea focusout');
});

Answer 8

इसे इस्तेमाल करे ...

$("#txtAreaID").bind("keyup", function(event, ui) {                          

              // Write your code here       
 });

Comments

मुख्य घटनाओं के लिए बाध्य करना पर्याप्त नहीं है क्योंकि पाठ को माउस से बदला जा सकता है (संदर्भ मेनू से "पेस्ट" / "कट" या ड्रैग एंड ड्रॉप)।

— कॉन्सटेंटिन स्मोलिनिन

Answer 9

.delegate केवल वही है जो jQuery जावास्क्रिप्ट लाइब्रेरी v2.1.1 के साथ मेरे लिए काम कर रहा है

 $(document).delegate('#textareaID','change', function() {
          console.log("change!");
    });

Answer 10

कुछ प्रयोग के बाद मैं इस कार्यान्वयन के साथ आया:

$('.detect-change')
    .on('change cut paste', function(e) {
        console.log("Change detected.");
        contentModified = true;
    })
    .keypress(function(e) {
        if (e.which !== 0 && e.altKey == false && e.ctrlKey == false && e.metaKey == false) {
            console.log("Change detected.");
            contentModified = true;
        }
    });

हैंडल किसी भी तरह के इनपुट में बदलाव करते हैं और साथ ही टेक्स्टारिस को तीर कुंजी और ctrl, cmd, फंक्शन कीज आदि जैसी चीजों को नजरअंदाज करते हैं।

नोट: मैंने केवल एफएफ में यह कोशिश की है क्योंकि यह एफएफ ऐड-ऑन के लिए है।

Answer 11

इसे इस्तेमाल करे

 $('textarea').trigger('change');
 $("textarea").bind('cut paste', function(e) { });

Comments

यह पूरी तरह से गलत नहीं है। वास्तव में अगर कोई उस मुद्दे को जोड़ती है $("#textarea").on('change keyup paste', function() {})और $('textarea').trigger('change');उस मुद्दे को संबोधित कर सकती है जो pasteस्वचालित रूप से काम करने से रोकता है !

— लोरेटोपरसी