Attivare sia gli eventi di sfocatura sia quelli di accesso dopo aver premuto invio in una casella di testo

Question

Dopo aver premuto immettere Mi piacerebbe che fosse sparato solo l'evento keyup ma che blur sia stato attivato per primo. Come annullare blur quandoviene generato con immettere?

Si consiglia di non associare entrambi blur e keyup in un unico metodo live().

$(".textbox").on("blur",function() { 
    alert("blur Event fired"); 
}); 

$(".textbox").on("keyup",function (event) { 
    if(event.keyCode == 13){ // Detect Enter 
     alert("KeyUp fired after pressing Enter"); 
    } 
}); 

Answer 1

non potrebbe modificare l'attributo class quindi mi piacerebbe finito con,

$(".textbox").on("blur",function() { 
    if($(this).attr('flag')!='1') 
     alert("blur Event fired"); 
}); 

$(".textbox").on("keyup",function (event) { 
    $(this).attr('flag','1'); 
    if(event.keyCode == 13){ // Detect Enter 
     alert("KeyUp fired after pressing Enter"); 
    } 
    $(this).attr('flag','0'); 
}); 

Answer 2

Modifica

Per evitare entrambi gli eventi da sparare, dovrete segnare in qualche modo l'elemento prima inducendolo a perdere la concentrazione. In questo modo, il tuo gestore di eventi blur può sapere se l'evento è oggetto di una chiave, o se ha perso l'attenzione legittimamente. Qualcosa di simile a questo:

$(".textbox").live("blur",function (event) { 
    if (!$(this).hasClass('keyupping')) 
     alert("blur Event fired"); 
}); 

$(".textbox").live("keyup",function (event) { 
    $(this).addClass('keyupping'); 
    if(event.keyCode == 13){ // Detect Enter 
     alert("KeyUp fired after pressing Enter"); 
    } 
    $(this).removeClass('keyupping'); 
}); 

Provalo: http://jsfiddle.net/GRMule/sR6zm/

---

risposta originale

Quando l'evento per keyup incendi, si prepara a richiamare la finestra di avviso del browser, che prende fuoco dal documento e lo applica alla finestra di dialogo modale. Ciò provoca l'attivazione dell'evento di sfocatura.

L'evento blur si avvia e termina il suo contesto di esecuzione prima che keyup sappia cosa lo ha colpito.

Lo dimostra utilizzando qualcosa che non lo fa distogliere l'attenzione l'elemento, come console.log: http://jsfiddle.net/GRMule/7vRLW/

L'ordine in cui gli eventi fuoco è specifico dell'implementazione, il che significa che non si può contare su Firefox recitazione come IE. Vedi le specifiche: http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-eventgroupings. Prova il violino con gli avvisi in IE, e in questo caso vedrai che blur colpisce prima di keyup in IE 7 - e blur non viene attivato in Chrome!

Answer 3

È stato portato alla mia attenzione rispetto piuttosto che fornire suggerimenti dovrei dare spiegazioni più complete ed esempi di codice, così qui è: c'è sempre il modo economico di impostare una variabile esterna:

var triggerBlur = true; 
$(".textbox") 
    .live({ 
     blur : function() { 
     if (triggerBlur) {// if not preceded by keyup 'Enter' event 
      alert("blur Event fired"); 
     } 
     // reset variable to true to allow the blur event to be triggered subsequently when not preceded by keyup 'Enter' event 
     triggerBlur = true; 
     }, 
     keyup : function (event) { 
     if(event.which === 13){ // Detect Enter 
      alert("KeyUp fired after pressing Enter"); 
      triggerBlur = false; 
     } 
     }); 

Inoltre è preferibile utilizzare event.which piuttosto che event.keyCode (vedere http://api.jquery.com/event.which/ per capire perché), e si consiglia di utilizzare l'operatore di identità '===' piuttosto che l'uguaglianza '==' in javascript, come quest'ultimo è rotto (vedi Which equals operator (== vs ===) should be used in JavaScript comparisons?)

Answer 4

Ho avuto un problema simile. Sto permettendo all'utente di modificare un singolo campo e quando si preme Invio o si sposta da quel campo, invio una richiesta Ajax per aggiornarlo. Ho scoperto che quando ho premuto Invio, la richiesta Ajax è stata inviata due volte.

Quindi invece di chiamare la mia richiesta su Invio, ho provato a chiamare $input.blur() invece, e questo ha funzionato! Il che mi ha fatto pensare ... Se il tasto Invio causa una sfocatura, dovrei anche provare a catturarla?

Nel mio caso, non ne ho avuto bisogno. Ho scoperto che tutto ciò di cui avevo bisogno era la sfocatura perché il tasto Invio lo ha comunque attivato. Non sono sicuro che sia al 100% su tutti i browser, ma ho provato le versioni correnti di Chrome, Firefox, IE e Safari, che hanno funzionato correttamente.

Quindi, ti suggerisco di non catturare affatto l'Invio o semplicemente di chiamare sfocatura() per attivare le azioni necessarie.

Answer 5

provare quanto segue. Aggiungendo un corso - aggiunto in questo esempio, nel gestore eventi keyup e modificando il selettore per l'evento sfocatura si impedirà l'attivazione del gestore eventi sfocatura.

$(".textbox:not(.added)").on("blur", function() { 
    alert("blur Event fired"); 
}); 

$(".textbox").on("keyup", function (event) { 
    if (event.keyCode == 13) { 
     $(event.currentTarget).addClass('added'); 
     alert("KeyUp fired after pressing Enter"); 
    } 
}); 

Answer 6

Ho un input in cui un utente può modificarlo, mettere a fuoco o premere invio. Tuttavia, quando si preme Invio, viene attivato sia il keydown che la sfocatura, quindi myFunction() viene attivato due volte.

Così, invece di scrivere due funzioni separate per keydown e blur, si può invece metterle in una sola funzione:

my_input.on('keydown blur', function (e) { 

    // was it the Enter key? 
    if (e.which == 13) { 
     $(this).blur(); 
    } 

    if (e.type == 'blur') { 
     myFunction(); 
    } 

});