2013-08-20 20 views
5

PANORAMICA:evento onchange non si attiva quando il valore viene modificato in onkeyup evento

Sto scrivendo un plugin jQuery che converte una casella di testo in una casella di immissione di tempo. Significa che consente all'utente di inserire il tempo nel formato HH: MM. Parte di questo processo consiste nell'inserire i due punti (:) nel posto giusto. Sulla chiave, controllo se l'utente ha digitato 2 numeri e, in tal caso, aggiunge due punti al valore inserito.

PROBLEMA:

Questo approccio funziona bene, tranne quando qualcuno si applica il plugin sulla casella di testo, ma anche vuole avere un costume onchange handler.This OnChange gestore non si attiva quando il codice aggiorna il valore di testo a livello di codice, né si attiva quando la casella di testo perde lo stato attivo.

mia comprensione:

Sto indovinando qui, quindi per favore correggetemi se sbaglio.

  • Forse la casella di testo ha un interno "_value"(sottolineando a differenziare dall'attributo valore pubblico) campo che contiene il valore nella casella di testo prima dell'inizio della modifica. Quando lo stato attivo lascia il texbox, il motore JS controlla se il valore corrente della casella di testo corrisponde allo "_value" della casella di testo. Se sono diversi, viene generato l'evento .
  • È possibile che le modifiche apportate al valore vengano eseguite utilizzando normali combinazioni di tasti nativi. Non modificare "_value" solo il valore, in modo che venga generato onchange. Ma forse le modifiche del valore modificate tramite JS modificano sia il valore e lo "_value" e così l'evento onchange non viene attivato?

soluzioni:

la sfocatura generato l'evento in quanto ha nulla a che con il valore. Quindi posso attivare esplicitamente l'evento change dall'evento blur. Ma non voglio farlo perché è un hack e interrompe la semantica di sfocatura e cambiamento.

Sul tema:

ho trovato diversi link SO con la stessa domanda ma nessuna risposta (IMHO) fornisce una soluzione elegante o corretti. qui sono alcuni di quelli che ho visto:

codice semplificato:

$(document).ready(function() { 
    $("input").keyup(function() { 
     this.value = '*' + this.value; 
     // this changes the value, but does not fire the onchange event 
     // and it also does not fire it when the textbox loses focus. 
     // blur fires though. 
    }); 
    $("input").change(function() { 
     alert('in change'); 
    }); 

    $("input").blur(function() { 
     alert('in blur'); 
    }); 
}); 

FIDDLE:

http://jsfiddle.net/sajjansarkar/vHgst/4/

browser testati: IE8,10 e Chrome. Lavori in Firefox (!!) (+1 Felix Kling)

+0

Che l'evento di modifica non si attiva se si imposta 'ele.value 'è il solito comportamento. Per vostra informazione, entrambi gli eventi 'blur' e' change' vengono attivati ​​in Firefox dopo che l'input perde lo stato attivo. –

+0

@FelixKling Se si tratta di un comportamento normale, come posso mantenere il comportamento di onchange? E l'osservazione interessante che funziona in FF, modificherà la domanda –

risposta

1

È possibile attivare eventi a livello di codice con jquery.trigger: http://jsfiddle.net/vHgst/5/

$(this).trigger('change'); 
+0

Sì, ma quando lo chiamo per simulare l'evento di cambiamento corretto? Il tuo esempio chiamerebbe l'onchange per ogni keyup –

Problemi correlati