jQuery legano a KeyUp solo, non si concentrano

Question

Questa sembra una cosa semplice, ma Google non si è presentato qualcosa per me:

Come posso legarsi solo a un evento di modifica di testo/valore, escludendo un focus guadagnando di ingresso ? Vale a dire, data la seguente:

$(function(){ 
    $('input#target').on('keyup', function(){ 
    alert('Typed something in the input.'); 
    }); 
}); 

... l'avviso dovrebbe essere attivato quando le schede utente dentro e fuori di un elemento, se il testo in realtà di input o meno. Come puoi consentire a un utente di passare da tastiera al modulo senza attivare l'evento a meno che non immetta/modifichi il testo nel campo di testo?

Nota: sto mostrando una versione semplificata di uno script, la ragione per non usare l'evento change è che nel mio codice vero e proprio ho un timer di ritardo affinché l'evento si verifica dopo che l'utente smette di digitare per un in secondo luogo, senza che debbano cambiare la messa a fuoco per attivare l'evento.

Answer 1

memorizzare il valore, e su qualsiasi controllo evento chiave se è cambiato, in questo modo:

$(function(){ 
    $('input#target').on('keyup', function(){ 
     if ($(this).data('val')!=this.value) { 
      alert('Typed something in the input.'); 
     } 
     $(this).data('val', this.value); 
    }); 
});​ 

FIDDLE

Answer 2

Utilizzare semplicemente l'evento .change.

Aggiornamento: Se si desidera che le notifiche di modifica dal vivo, allora devi passare attraverso l'evento keyup, il che significa che è necessario programmare il gestore di ignorare quelle chiavi, che non si tradurrà in valore venga modificato.

È possibile implementare questo con una whitelist di codici chiave che sono ignorati, ma potrebbe ottenere brutto: premendo Del risultati di valore essendo modificato, a meno che il cursore è posizionato all'estremità dell'ingresso nel qual caso no, a meno che non ci sia un intervallo selezionato nell'input, nel qual caso lo fa.

Un altro modo che personalmente trovo più sano se non come "puro" è programmare il gestore per ricordare il vecchio valore dell'elemento e reagire solo se è cambiato.

$(function() { 
    // for each input element we are interested in 
    $("input").each(function() { 
     // set a property on the element to remember the old value, 
     // which is initially unknown 
     this.oldValue = null; 
    }).focus(function() { 
     // this condition is true just once, at the time we 
     // initialize oldValue to start tracking changes 
     if (this.oldValue === null) { 
      this.oldValue = this.value; 
     } 
    }).keyup(function() { 
     // if no change, nothing to do 
     if (this.oldValue == this.value) { 
      return; 
     } 

     // update the cached old value and do your stuff 
     this.oldValue = this.value; 
     alert("value changed on " + this.className); 
    }); 
});​ 

Se non si desidera impostare le proprietà direttamente sull'elemento DOM (in realtà, non c'è niente di sbagliato con esso) allora si potrebbe sostituire $(this).data("oldValue") per this.oldValue ogni volta che appare. Ciò avrà tecnicamente l'inconveniente di rallentare il codice, ma non credo che nessuno lo noterà.

See it in action.

Answer 3

Questo lo farà, impostare un attributo personalizzato e verificare contro che:

$('input').focus(function(){ 
    $(this).attr('originalvalue',$(this).val()); 
}); 

$('input').on('keyup',function(){ 
    if($(this).val()===$(this).attr('originalvalue')) return; 
    alert('he must\'ve typed something.'); 
}); 

diffidare di eventi di cottura più volte.

Answer 4

Ecco un'altra versione che mette alla prova chiaramente se il campo di input è vuoto.

Se l'input è vuoto, l'azione non viene eseguita.

$(function(){ 
    $(selector).on('keyup', function(){ 
     if ($(this).val()!='') { 
      alert('char was entered'); 
     } 
    }) 
});