evento javascript change sull'elemento input si attiva solo in caso di perdita di messa a fuoco

Question

Ho un elemento di input e voglio continuare a controllare la lunghezza del contenuto e ogni volta che la lunghezza diventa uguale a una determinata dimensione, voglio abilitare il pulsante di invio, ma Sto affrontando un problema con l'evento onchange di javascript poiché l'evento si attiva solo quando l'elemento di input esce dall'ambito e non quando i contenuti cambiano.

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

---- onchange non si attiva su come cambiare i contenuti del nome, ma solo quando i fuochi nome va fuori fuoco.

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

Voglio qualcosa che può funzionare quando il contenuto del campo cambia sia tramite tastiera o con il mouse ... qualche idea?

Answer 1

(function() { 
    var oldVal; 

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

Questo prenderà change, le battiture, paste, textInput, input (quando disponibile). E non sparare più del necessario.

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

---

Riferimenti:

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

Un agente 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 da un tasto premuto o rilasciato su un dispositivo tastiera, dall'elaborazione di un metodo di immissione o derivante da un comando vocale. Quando un'operazione "incolla" genera una semplice sequenza di caratteri, ad esempio un passaggio di testo senza alcuna informazione di struttura o di stile, questo tipo di evento dovrebbe essere anche generato.

input - un tipo di evento HTML5.

sparato a controlli quando l'utente cambia il valore

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

Questo evento si verifica immediatamente dopo la modifica, a differenza dell'evento onchange, che si verifica quando l'elemento perde lo stato attivo.

Answer 2

Do it the jQuery way:

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


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

Answer 3

È possibile utilizzare onkeyup

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

Answer 4

Si dovrà utilizzare una combinazione di onkeyup e onclick (o onmouseup) se si desidera catturare ogni possibilità.

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

Answer 5

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

è qui, ho utilizzato 5-6 caselle di input hanno classe 'Filterbox', faccio metodo filterBy periodo solo se i dati valore è diverso da un suo valore.

Answer 6

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