Comment savoir si le verrouillage des majuscules est activé en utilisant JavaScript ?

Question

Comment savoir si le verrouillage des majuscules est activé en utilisant JavaScript ?

Un bémol toutefois : j'ai cherché sur Google et la meilleure solution que j'ai trouvée consiste à joindre un fichier de type onkeypress à chaque entrée, puis vérifie à chaque fois si la lettre appuyée est une majuscule, et si c'est le cas, vérifie si shift a également été maintenue enfoncée. Si ce n'est pas le cas, alors le verrouillage des majuscules doit être activé. Cela semble vraiment sale et juste... gaspillage - Il y a sûrement un meilleur moyen que ça ?

Answer 1

Dans jQuery,

$('#example').keypress(function(e) { 
    var s = String.fromCharCode( e.which );
    if ( s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey ) {
        alert('caps is on');
    }
});

Évitez l'erreur, comme la touche retour arrière, s.toLowerCase() !== s est nécessaire.

Answer 2

Vous pouvez l'essayer. Nous avons ajouté un exemple fonctionnel. Lorsque le focus est sur l'entrée, le fait d'activer le verrouillage des majuscules fait que la led passe du rouge au vert. (Je n'ai pas testé sur mac/linux)

NOTE : Les deux versions fonctionnent pour moi. Merci pour les contributions constructives dans les commentaires.

ANCIENNE VERSION : https://jsbin.com/mahenes/edit?js,output

Voici aussi une version modifiée (quelqu'un peut-il tester sur mac et confirmer)

NOUVELLE VERSION : https://jsbin.com/xiconuv/edit?js,output

NOUVELLE VERSION :

function isCapslock(e) {
  const IS_MAC = /Mac/.test(navigator.platform);

  const charCode = e.charCode;
  const shiftKey = e.shiftKey;

  if (charCode >= 97 && charCode <= 122) {
    capsLock = shiftKey;
  } else if (charCode >= 65 && charCode <= 90
    && !(shiftKey && IS_MAC)) {
    capsLock = !shiftKey;
  }

  return capsLock;
}

ANCIENNE VERSION :

function isCapslock(e) {
  e = (e) ? e : window.event;

  var charCode = false;
  if (e.which) {
    charCode = e.which;
  } else if (e.keyCode) {
    charCode = e.keyCode;
  }

  var shifton = false;
  if (e.shiftKey) {
    shifton = e.shiftKey;
  } else if (e.modifiers) {
    shifton = !!(e.modifiers & 4);
  }

  if (charCode >= 97 && charCode <= 122 && shifton) {
    return true;
  }

  if (charCode >= 65 && charCode <= 90 && !shifton) {
    return true;
  }

  return false;
}

Pour les caractères internationaux, une vérification supplémentaire peut être ajoutée pour les touches suivantes, selon les besoins. Vous devez obtenir la gamme de codes de clé pour les caractères qui vous intéressent, peut-être en utilisant un tableau de mappage de clé qui contiendra toutes les clés de cas d'utilisation valides que vous adressez...

majuscules de A à Z ou "Ä", "Ö", "Ü", minuscules a-Z ou 0-9 ou "ä", "ö", "ü".

Les clés ci-dessus ne sont que des exemples de représentation.

Answer 3

Vous pouvez détecter le verrouillage des majuscules en utilisant "la lettre est en majuscule et aucune majuscule n'a été pressée" en utilisant une capture de pression de touche sur le document. Mais vous devez alors vous assurer qu'aucun autre gestionnaire d'appui sur les touches ne fait éclater la bulle d'événement avant qu'elle n'atteigne le gestionnaire du document.

document.onkeypress = function ( e ) {
  e = e || window.event;
  var s = String.fromCharCode( e.keyCode || e.which );
  if ( (s.toUpperCase() === s) !== e.shiftKey ) {
    // alert('caps is on')
  }
}

Vous pourriez saisir l'événement pendant la phase de capture dans les navigateurs qui le supportent, mais cela semble quelque peu inutile car cela ne fonctionnera pas sur tous les navigateurs.

Je ne vois pas d'autre moyen de détecter l'état de verrouillage des majuscules. La vérification est simple de toute façon et si des caractères non détectables ont été tapés, eh bien... alors la détection n'était pas nécessaire.

Il y avait un article sur les 24 façons sur ce sujet l'année dernière. Assez bon, mais il manque la prise en charge des caractères internationaux (utilisation de toUpperCase() pour contourner ce problème).

Answer 4

De nombreuses réponses existantes vérifient si le verrouillage des majuscules est activé lorsque la touche shift n'est pas enfoncée, mais ne le vérifient pas si vous appuyez sur shift et obtenez des minuscules, ou vérifient cela mais ne vérifient pas également si le verrouillage des majuscules est désactivé, ou vérifient cela mais considèrent les touches non alpha comme "désactivées". Voici une solution jQuery adaptée qui affichera un avertissement si une touche alpha est pressée avec des majuscules (shift ou non), désactivera l'avertissement si une touche alpha est pressée sans majuscules, mais ne désactivera ou n'activera pas l'avertissement lorsque des chiffres ou d'autres touches sont pressés.

$("#password").keypress(function(e) { 
    var s = String.fromCharCode( e.which );
    if ((s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey)|| //caps is on
      (s.toUpperCase() !== s && s.toLowerCase() === s && e.shiftKey)) {
        $("#CapsWarn").show();
    } else if ((s.toLowerCase() === s && s.toUpperCase() !== s && !e.shiftKey)||
      (s.toLowerCase() !== s && s.toUpperCase() === s && e.shiftKey)) { //caps is off
        $("#CapsWarn").hide();
    } //else upper and lower are both same (i.e. not alpha key - so do not hide message if already on but do not turn on if alpha keys not hit yet)
  });

Answer 5

Dans JQuery. Cela couvre le traitement des événements dans Firefox et vérifie les caractères majuscules et minuscules inattendus. Cela présuppose un <input id="password" type="password" name="whatever"/> et un élément séparé avec l'id ' capsLockWarning qui contient l'avertissement que nous voulons afficher (mais qui est caché autrement).

$('#password').keypress(function(e) {
    e = e || window.event;

    // An empty field resets the visibility.
    if (this.value === '') {
        $('#capsLockWarning').hide();
        return;
    }

    // We need alphabetic characters to make a match.
    var character = String.fromCharCode(e.keyCode || e.which);
    if (character.toUpperCase() === character.toLowerCase()) {
        return;
    }

    // SHIFT doesn't usually give us a lowercase character. Check for this
    // and for when we get a lowercase character when SHIFT is enabled. 
    if ((e.shiftKey && character.toLowerCase() === character) ||
        (!e.shiftKey && character.toUpperCase() === character)) {
        $('#capsLockWarning').show();
    } else {
        $('#capsLockWarning').hide();
    }
});