L'evento di modifica JavaScript sull'elemento di input si attiva solo quando si perde il focus

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 evento si attiva solo quando l'elemento di input esce dall'ambito e non quando il contenuto cambia.

<input type="text" id="name" onchange="checkLength(this.value)" />

---- onchange non si attiva quando si cambiano i contenuti di name, ma si attiva solo quando il nome diventa sfocato.

C'è qualcosa che posso fare per far funzionare questo evento sulla modifica dei contenuti? o qualche altro evento che posso usare per questo? Ho trovato una soluzione alternativa utilizzando la funzione onkeyup, ma questa non si attiva quando selezioniamo alcuni contenuti dal completamento automatico del browser.

Voglio qualcosa che possa funzionare quando il contenuto del campo cambia sia con la tastiera che 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 prenderà change, battiture, paste, textInput, input(quando disponibile). E non sparare più del necessario.

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

Riferimenti:

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

Un programma utente deve inviare questo evento quando sono stati inseriti uno o più caratteri. Questi caratteri possono provenire da una varietà di fonti, ad esempio caratteri risultanti dalla pressione o dal rilascio di un tasto su un dispositivo a tastiera, dall'elaborazione di un editor del metodo di input o dal risultato di un comando vocale. Laddove un'operazione di "incolla" genera una semplice sequenza di caratteri, cioè un passaggio di testo senza alcuna struttura o informazione di stile, dovrebbe essere generato anche questo tipo di evento.

input- un tipo di evento HTML5 .

Sparato 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, a differenza dell'evento onchange, che si verifica quando l'elemento perde il focus.

Come estensione alla risposta di katspaugh, ecco un modo per farlo per più elementi usando una classe 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());
        }
    });

Mi ci sono voluti 30 minuti per trovarlo, ma funziona a giugno 2019.

<input type="text" id="myInput" oninput="myFunction()">

e se vuoi aggiungere un listener di eventi a livello di programmazione in js

inputElement.addEventListener("input", event => {})

Fallo nel modo jQuery:

<input type="text" id="name" name="name"/>


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

Puoi usare onkeyup

<input id="name" onkeyup="checkLength(this.value)" />

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

<input id="name" onkeyup="checkLength(this.value)" onmouseup="checkLength(this.value)" />

Ecco un'altra soluzione che sviluppo per lo stesso problema. Tuttavia utilizzo molte caselle di input, quindi mantengo il vecchio valore come attributo definito dall'utente degli elementi stessi: "valore-dati". Utilizzando 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 classe 'filterBox', faccio eseguire il metodo filterBy solo se data-value è diverso dal proprio valore.