Come posso associare all'evento change di una textarea in jQuery?


219

Voglio catturare in caso di cambiamenti <textarea>. Come digitare caratteri (eliminazione, backspace) o fare clic con il mouse e incollare o tagliare. Esiste un evento jQuery che può essere attivato per tutti quegli eventi?

Ho provato a modificare l'evento, ma innesca la richiamata solo dopo aver effettuato la tabulazione dal componente.

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


18
Il collegamento agli eventi chiave non è sufficiente perché il testo può essere modificato con il mouse ("incolla" / "taglia" dal menu di scelta rapida o trascina e rilascia).
Konstantin Smolyanin,

Una domanda simile è discussa in Rilevazione di scambio di Textarea .
dma_k,

Risposte:


333

Prova questo in realtà:

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

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

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

DEMO

Funziona con qualsiasi modifica apportata, digitando, tagliando, incollando.


5
@Senthilnathan: No funziona in Chrome e FF anche per me perché non è solo propertychangelì c'è ancheinput
Blaster

4
Fai attenzione perché ho appena detto che nessuno di questi due eventi si attiva in IE9 (non ho controllato le versioni precedenti di IE) quando il tasto backspace viene premuto in un'area di testo.
Zappa,

26
Queste demo stanno usando <input type="text">, non<textarea>
Ben Collins,

5
Cambia 'input propertychange' in 'input change' in modo che funzioni anche in IE9. paulbakaus.com/2012/06/14/propertychange-on-internet-explorer-9
c0D3l0g1c

11
Vedo che hai usato <input type = "textarea" cols = "10" righe = "4" /> nella DEMO, sul serio?
DrLightman,

142

bindè deprecato. Utilizzare on:

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

Nota: il codice sopra si attiverà più volte, una volta per ogni tipo di trigger corrispondente. Per gestirlo, fai qualcosa del genere:

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


3
la on("change", function() ....parte non funziona per me. Non attiva alcun avviso, né registri della console, nulla. Tuttavia, il keyup funziona come un incantesimo.
Sebastialonso,

3
@Sebastialonso: on("change", function() ... viene attivato solo quando l'area di testo perde lo stato attivo . Fai riferimento alla mia domanda precedente per questo, e provalo su questo violino : cambia l'area di testo, quindi fai clic all'esterno dell'area di testo e dovresti vedere l'attivazione dell'evento di modifica.
SNag

@Snag che il codice non funziona su Chrome 45, ma funziona su FF 41
DariusVE,

Se sei bloccato usando jQuery prima della versione 1.7, tuttavia, questo non si applica
Code Jockey

votazione per l'uso su una funzione non deprecata. Molto meglio di .bind ()
Danny Harding il

79

Usa un inputevento.

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

Per Internet Explorer, questo richiede 9+ o anche 10+ per funzionare correttamente.
Udi,

1
Questa soluzione funziona come un fascino. Supera perfettamente le limitazioni dei gestori di eventi change () e keypress (). Grazie mille forchette.
Vickar,

25

Questa domanda aveva bisogno di una risposta più aggiornata, con fonti. Questo è ciò che funziona effettivamente (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 / it-it / library / ms536956 (v = vs.85) .aspx
4: http://api.jquery.com/prop/#prop-propertyName-function

MA, per una soluzione più globale che è possibile utilizzare in tutto il progetto , consiglio di utilizzare il plug-in jQuery di textchange per ottenere un nuovo textchangeevento compatibile con più browser . È stato sviluppato dalla stessa persona che ha implementato l' onChangeevento equivalente per ReactJS di Facebook, che usano per quasi tutto il loro sito web. E penso che sia sicuro di dire, se è una soluzione abbastanza solida per Facebook, probabilmente è abbastanza robusta per te. :-)

AGGIORNAMENTO: Se ti occorrono funzionalità come il supporto del trascinamento della selezione in Internet Explorer, potresti invece voler dare un'occhiata al pandellfork di recente aggiornatojquery-splendid-textchange .


Anche se sembra che il "cambio di selezione" funzioni solo quando applicato al documento. L'elemento attivo può essere ottenuto con "document.activeElement".
fino al

11

2018, senza JQUERY

La domanda è con JQuery, è solo FYI.

JS

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

HTML

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

4

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

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

Per i browser obsoleti potresti anche aggiungere selectionchangee propertychange(come indicato in altre risposte). Ma selectionchangenon ha funzionato per me in IE9. Ecco perché ho aggiunto keyup.


2

Prova a farlo con il focusout

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

1

prova questo ...

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

              // Write your code here       
 });

7
Il collegamento agli eventi chiave non è sufficiente perché il testo può essere modificato con il mouse ("incolla" / "taglia" dal menu di scelta rapida o trascina e rilascia).
Konstantin Smolyanin,

1

.delegate è l'unico che mi funziona con jQuery JavaScript Library v2.1.1

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

0

Dopo un po 'di sperimentazione, ho realizzato 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, nonché textareas ignorando i tasti freccia e cose come ctrl, cmd, tasti funzione, ecc.

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


-11

Prova questo

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

questo non è completamente sbagliato. In effetti se uno combina $("#textarea").on('change keyup paste', function() {})e $('textarea').trigger('change');può affrontare il problema che impedisce pastedi funzionare automaticamente!
Loretoparisi,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.