[javascript] Come posso legare all'evento di modifica di una textarea in jQuery?



Answers

bind è deprecato. Utilizzare on :

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

Nota: il codice sopra verrà generato più volte, una volta per ogni tipo di trigger corrispondente. Per gestirlo, fai qualcosa di simile a questo:

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 Demo

Question

Voglio catturare se sono avvenute modifiche a <textarea> . Come digitare qualsiasi carattere (eliminazione, backspace) o clic del mouse e incollare o tagliare. C'è un evento jQuery che può innescarsi per tutti quegli eventi?

Ho provato a cambiare evento, ma attiva la funzione di callback solo dopo aver estratto il componente.

Usa : Voglio abilitare un pulsante se una <textarea> contiene un testo.




Ecco un'altra versione (moderna) ma leggermente diversa da quelle menzionate in precedenza. Testato con IE9:

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

Per i browser obsoleti si potrebbe anche aggiungere selectionchange e propertychange (come menzionato in altre risposte). Ma selectionchange non ha funzionato per me in IE9. Ecco perché ho aggiunto la keyup .




Dopo alcuni esperimenti sono arrivato a questa implementazione:

$('.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;
        }
    });

Gestisce le modifiche a qualsiasi tipo di input e seleziona così come i textareas ignorano i tasti freccia e cose come ctrl, cmd, tasti funzione, ecc.

Nota: l'ho provato solo in FF poiché è per un componente aggiuntivo FF.




prova questo ...

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

              // Write your code here       
 });



Questa domanda aveva bisogno di una risposta più aggiornata, con le fonti. Questo è ciò che effettivamente funziona (anche se non devi credermi sulla parola):

// 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: oninput in IE9 non si attiva quando si preme BACKSPACE / DEL / do CUT
3: https://msdn.microsoft.com/en-us/library/ms536956(v=vs.85).aspx
4: http://api.jquery.com/prop/#prop-propertyName-function

MA, per una soluzione più globale che puoi utilizzare nel tuo progetto , ti consiglio di utilizzare il plugin jQuery textchange per ottenere un nuovo evento textchange compatibile con più browser. È stato sviluppato dalla stessa persona che ha implementato l'evento onChange equivalente per ReactJS di Facebook, che utilizzano per quasi tutto il loro sito web. E penso che sia sicuro dire che, se è una soluzione abbastanza robusta per Facebook, probabilmente è abbastanza robusta per te. :-)

AGGIORNAMENTO: Se hai bisogno di funzionalità come il trascinamento della selezione in Internet Explorer, puoi invece controllare il fork di jquery-splendid-textchange più recentemente aggiornato di jquery-splendid-textchange .




Related