l’evento di modifica javascript sull’elemento di input viene triggersto solo se si perde lo stato attivo

Ho un elemento di input e voglio continuare a controllare la lunghezza dei contenuti e ogni volta che la lunghezza diventa uguale a una dimensione particolare, voglio abilitare il pulsante di invio, ma sto affrontando un problema con l’evento onchange di javascript come l’evento si triggers solo quando l’elemento di input esce dall’ambito e non quando il contenuto cambia.

—- onchange non si triggers cambiando il contenuto del nome, ma si triggers solo quando il nome non viene messo a fuoco.

C’è qualcosa che posso fare per far funzionare questo evento sul cambiamento dei contenuti? o qualche altro evento che posso usare per questo? Ho trovato una soluzione alternativa utilizzando la funzione onkeyup, ma ciò non si triggers quando selezioniamo alcuni contenuti dal completamento automatico del browser.

Voglio qualcosa che possa funzionare quando il contenuto del campo cambia sia con la tastiera o con il mouse … qualche idea?

 (function () { var oldVal; $('#name').on('change textInput input', function () { var val = this.value; if (val !== oldVal) { oldVal = val; checkLength(val); } }); }()); 

Questo catturerà change , sequenze di tasti, paste , textInput , input (se disponibile). E non sparare più del necessario.

http://jsfiddle.net/katspaugh/xqeDj/


Riferimenti:

textInput – un tipo di evento di livello 3 del DOM W3C. http://www.w3.org/TR/DOM-Level-3-Events/#events-textevents

Un agente utente deve inviare questo evento quando uno o più caratteri sono stati inseriti. Questi caratteri possono provenire da una varietà di fonti, ad esempio i caratteri risultanti da un tasto premuto o rilasciato su un dispositivo tastiera, dall’elaborazione di un editor del metodo di input o risultante da un comando vocale. Laddove un’operazione “incolla” genera una semplice sequenza di caratteri, cioè un passaggio di testo senza alcuna informazione di struttura o stile, anche questo tipo di evento dovrebbe essere generato.

input : un tipo di evento HTML5 .

Attivato ai controlli quando l’utente modifica il valore

Firefox, Chrome, IE9 e altri browser moderni lo supportano.

Questo evento si verifica immediatamente dopo la modifica, diversamente dall’evento onchange, che si verifica quando l’elemento perde lo stato attivo.

Come estensione alla risposta di katspaugh, ecco un modo per farlo per più elementi usando una class css.

  $('.myclass').each(function(){ $(this).attr('oldval',$(this).val()); }); $('.myclass').on('change keypress paste focus textInput input',function(){ var val = $(this).val(); if(val != $(this).attr('oldval') ){ $(this).attr('oldval',val); checkLength($(this).val()); } }); 

Fallo in modo jQuery:

  $('#name').keyup(function() { alert('Content length has changed to: '+$(this).val().length); }); 

Puoi usare onkeyup

  

Dovresti usare una combinazione di onkeyup e onclick (o onmouseup ) se vuoi cogliere ogni possibilità.

  

Ecco un’altra soluzione che sviluppo per lo stesso problema. Tuttavia uso molte caselle di input, quindi mantengo il vecchio valore come un attributo definito dall’utente degli elementi stessi: “valore-dati”. Usare jQuery è così facile da gestire.

  $(document).delegate('.filterBox', 'keyup', { self: this }, function (e) { var self = e.data.self; if (e.keyCode == 13) { e.preventDefault(); $(this).attr('data-value', $(this).val()); self.filterBy(this, true) } else if (e.keyCode == 27) { $(this).val(''); $(this).attr('data-value', ''); self.filterBy(this, true) } else { if ($(this).attr('data-value') != $(this).val()) { $(this).attr('data-value', $(this).val()); self.filterBy(this); } } }); 

ecco, ho usato 5-6 caselle di input con class ‘filterBox’, faccio in modo che il metodo filterBy venga eseguito solo se il valore dei dati è diverso dal suo valore.