Perché il tasto di pressione su una scheda causa la modifica dello stato attivo triggersndo anche l’evento di key-up?

Premendo il tasto tab che triggers un cambio di messa a fuoco viene anche ricevuto dall’ingresso che riceve il focus come keyup.

a: 
b:

http://jsfiddle.net/59SnP/

Poiché il mio controllo utilizza anche la scheda (non nell’esempio), vorrei che venisse consumato l’evento keyup correlato allo stato attivo ( ma desidero ricevere altri eventi di tabulazione relativi a non-focus-change) . Ho provato a ricercare la logica dietro il comportamento corrente ma non ho trovato nulla. La domanda: dove viene specificato questo comportamento corrente (evento non consumato dal cambio di messa a fuoco) e quale sarebbe una soluzione alternativa al browser per forzare il consumo. Grazie.

Puoi provare questo Ho modificato il tuo evento keyup nel tuo input:

  

E ho aggiunto un piccolo gestore di eventi che genererà un flag quando viene premuto il tasto tab :

 var tabPressed = false; document.addEventListener('keydown', function (e) { if(e.keyCode == 9) { tabPressed = true; } else { tabPressed = false; } }, false); 

Basato sull’intuizione di Nathan, ecco un esempio pienamente funzionante:

 // First part of Nathan's HACK (set a sentinel when a focus changing tab has happened) var tabPressed = false; // remove this listener to break the functionality $(document).on("keydown", function (e) { if(e.keyCode == 9) { tabPressed = true; } else { tabPressed = false; } }); // The listener on the client input that would kill the keyup tab event upon focus change $("#magic").on("keyup", function(e) { if (tabPressed && e.keyCode==9) { tabPressed = false; // reset the sentinel e.stopImmediatePropagation() e.preventDefault() } }) 

Ed ecco la seconda parte, che è un semplice scheletro di qualcosa di significativo. Disabilitiamo TAB all’interno dell’input e lo registriamo come facciamo con altri keyup:

 $("#magic").on("keydown", function(e) { if (e.keyCode==9) { e.preventDefault() e.stopPropagation() } }) $("#magic").on("keyup", function(e) { $(this).val($(this).val() + " " + e.keyCode) e.stopPropagation() e.preventDefault() }) 

Il supporto HTML della storia è semplice come:

 a: 
b:
c:

Se vuoi giocare con esso, eccolo su jsfiddle

NOTA: Questa non è ancora la soluzione perfetta, la sentinella viene semplicemente reimpostata all’interno del controllo, quindi se una linguetta che sposta lo stato attivo non triggers il nostro input, la sentinella si blocca e il primo evento verrà inghiottito. Ecco un esempio di comportamento sbagliato:

  1. Clicca sull’ingresso A
  2. Premere TAB (il focus si sposta sull’ingresso B, tabPressed diventa true)
  3. Clicca sull’ingresso C
  4. Premere TAB (è mangiato come sentinella è vero)
  5. Premere TAB (ora passa attraverso)

Tuttavia è leggermente meglio premere TAB due volte per far sì che qualcosa accada automaticamente, wo controllo utente …