Evento "input" di jQuery

Non ho mai sentito parlare di un evento in jQuery chiamato inputfino a quando non ho visto questo jsfiddle .

Sai perché funziona? È un alias per keyupo qualcosa del genere?

$(document).on('input', 'input:text', function() {});

Si verifica quando il contenuto del testo di un elemento viene modificato tramite l'interfaccia utente.

Non è un vero alias keyupperché si keyupattiverà anche se il tasto non fa nulla (ad esempio: premendo e rilasciando il tasto Control si innescherà un keyupevento).

Un buon modo di pensarci è così: è un evento che si innesca ogni volta che cambia l'input. Ciò include - ma non si limita a - premere i tasti che modificano l'input (quindi, per esempio, Ctrlda solo non attiverà l'evento, maCtrl-V incollare del testo lo farà), selezionando un'opzione di completamento automatico, in stile Linux centrale -click incolla, trascina e rilascia e molte altre cose.

Vedi questa pagina e i commenti su questa risposta per maggiori dettagli.

oninput L'evento è molto utile per tenere traccia delle modifiche ai campi di input.

Tuttavia, non è supportato in IE versione <9. Ma le versioni precedenti di IE hanno un proprio evento proprietario onpropertychangeche fa lo stesso di oninput.

Quindi puoi usarlo in questo modo:

$(':input').on('input propertychange');

Per avere un supporto completo per i browser.

Poiché il cambio di proprietà può essere attivato per QUALSIASI cambio di proprietà, ad esempio, la proprietà disabilitata viene modificata, quindi si desidera includere questo:

$(':input').on('propertychange input', function (e) {
    var valueChanged = false;

    if (e.type=='propertychange') {
        valueChanged = e.originalEvent.propertyName=='value';
    } else {
        valueChanged = true;
    }
    if (valueChanged) {
        /* Code goes here */
    }
});

Utilizzando jQuery, i seguenti effetti sono identici:

$('a').click(function(){ doSomething(); });
$('a').on('click', function(){ doSomething(); });

Con l' inputevento, tuttavia, solo il secondo modello sembra funzionare nei browser che ho testato.

Quindi, ti aspetteresti che funzioni, ma NON (almeno attualmente):

$(':text').input(function(){ doSomething(); });

Ancora una volta, se si desidera sfruttare la delega degli eventi (ad esempio per impostare l'evento #containerprima che input.textvenga aggiunto al DOM), questo dovrebbe venire in mente:

$('#container').on('input', ':text', function(){ doSomething(); });

Purtroppo, di nuovo, NON funziona attualmente!

Funziona solo questo modello:

$(':text').on('input', function(){ doSomething(); });

MODIFICATO CON ALTRE INFORMAZIONI ATTUALI

Posso certamente confermare che questo modello:

$('#container').on('input', ':text', function(){ doSomething(); });

ORA FUNZIONA anche, in tutti i browser "standard".

Come diceva claustrofob, oninput è supportato per IE9 +.

Tuttavia , "L'evento oninput è errato in Internet Explorer 9. Non viene generato quando i caratteri vengono eliminati da un campo di testo attraverso l'interfaccia utente solo quando vengono inseriti i caratteri. Sebbene l'evento onpropertychange sia supportato in Internet Explorer 9, ma in modo simile al evento oninput, è anche buggy, non viene attivato alla cancellazione.

Poiché i caratteri possono essere eliminati in diversi modi (Backspace ed Elimina tasti, CTRL + X, comando Taglia ed Elimina nel menu contestuale), non esiste una buona soluzione per rilevare tutte le modifiche. Se i caratteri vengono eliminati dal comando Elimina del menu di scelta rapida, la modifica non può essere rilevata in JavaScript in Internet Explorer 9. "

Ho buoni risultati che vincolano sia l'input che il keyup (e il keydown, se vuoi che si attivi in ​​IE mentre tieni premuto il tasto Backspace).

Fai attenzione quando usi INPUT. Questo evento si concentra sulla messa a fuoco e sulla sfocatura in IE 11. Ma è attivato dal cambiamento in altri browser.

https://connect.microsoft.com/IE/feedback/details/810538/ie-11-fires-input-event-on-focus

Penso che "input" funzioni semplicemente allo stesso modo di "oninput" nel modello di eventi O di livello DOM.

Tra l'altro:

Proprio come ha commentato Silkfire, anch'io ho cercato su Google "evento input jQuery". Così sono stato portato qui e sono rimasto sbalordito nell'apprendere che 'input' è un parametro accettabile per il comando bind () di jquery . In jQuery in Action (p. 102, ed. 2008) "input" non è menzionato come un possibile evento (contro altri 20, da "sfocatura" a "scarico"). È vero che, a p. 92, il contrario potrebbe essere ipotizzato dalla rilettura (cioè da un riferimento a diversi identificatori di stringa tra i modelli di Livello 0 e Livello 2). Questo è abbastanza fuorviante.

jQuery ha la seguente firma per il .on()metodo:.on( events [, selector ] [, data ], handler )

Gli eventi potrebbero essere quelli elencati in questo riferimento:

https://developer.mozilla.org/en-US/docs/Web/Events

Tuttavia, non sono tutti supportati da tutti i browser.

Mozilla afferma quanto segue sull'evento di input:

L'evento di input DOM viene generato in modo sincrono quando viene modificato il valore di un elemento o. Inoltre, viene attivato dagli editor contenteditable quando i suoi contenuti vengono modificati.

$("input#myId").bind('keyup', function (e) {    
    // Do Stuff
});

funziona sia con IE che con Chrome