événement keyDown ne se déclenche pas pour Capslock Mac

Question

CHROME (52):

Lorsque vous mettez le verrouillage des majuscules - seulement keydown est tiré (aucun cas dans keyUp ou keyPress)

Lorsque vous mettez le verrouillage des majuscules OFF - uniquement keyup est tiré (aucun cas dans keyDown ou keyPress)

FIREFOX (46):

Seul événement keyDown est déclenché pour les deux verrouillage des majuscules & OFF (pas keyUp ou keyPress)

J'ai lu sur les codes d'activation et les événements ici http://www.quirksmode.org/js/keys.html et ici https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode MDN, Aaaand ici http://unixpapa.com/js/key.html

Mais aucun des liens ci-dessus parle de ce comportement bizarre. Est-ce que c'est prévu? Si oui, un moyen plus facile de le gérer?

Answer 1

Oui, c'est prévu.

Chrome traite les CAPS comme keydown parce qu'il traite la marche/arrêt comme maintenez enfoncée la touche, comme nous tenons clé changement, qui tourne sur bouchons sur le comportement et se désactive lorsque nous libérer. Ce bouton Caps Lock également. Lorsque vous activez le verrouillage des majuscules , poignées chromées la « allumer » comme keypress et quand vous « éteignez » ce qu'il gère comme keyup. Mais, firefox gère tout comme keydown ce qui n'a pas de sens pour moi par rapport à la façon dont le chrome gère la même chose.

Solution

Vous devez utiliser getModifierState() pour obtenir l'état du Caps Lock. Ceci est supporté par chrome et firefox.

J'espère que ça aide!

$(function() { 
 
    $(window).on("keydown", function(e){ 
 
    if (e.which === 20) 
 
     console.log(e.originalEvent.getModifierState('CapsLock')) 
 
    }); 
 
    $(window).on("keyup", function(e) { 
 
    if (e.which === 20) 
 
     console.log(e.originalEvent.getModifierState('CapsLock')) 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
Focus here and press 'Caps Lock'