Comment savoir si le verrouillage des majuscules est activé à l'aide de JavaScript?

Comment savoir si le verrouillage des majuscules est activé à l'aide de JavaScript?

Une mise en garde cependant: je l'ai fait sur Google et la meilleure solution que j'ai pu trouver était d'attacher un onkeypressévénement à chaque entrée, puis de vérifier à chaque fois si la lettre appuyée était en majuscule, et si c'était le cas, puis de vérifier si le décalage était également maintenu enfoncé. Dans le cas contraire, le verrouillage des majuscules doit être activé. C'est vraiment sale et juste ... du gaspillage - il y a sûrement une meilleure façon que ça?

Vous pouvez l'essayer .. Ajout d'un exemple de travail. Lorsque la mise au point est sur l'entrée, l'activation du verrouillage des majuscules fait que la LED devient rouge, sinon verte. (Non testé sur mac / linux)

REMARQUE: les deux versions fonctionnent pour moi. Merci pour vos contributions constructives dans les commentaires.

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

En outre, voici 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:

fonction 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 clés suivantes selon les besoins. Vous devez obtenir la plage de codes clés pour les caractères qui vous intéressent, peut-être en utilisant un tableau de mappage de clés qui contiendra toutes les clés de cas d'utilisation valides que vous adressez ...

AZ majuscule ou 'Ä', 'Ö', 'Ü', aZ minuscule ou 0-9 ou 'ä', 'ö', 'ü'

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

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 de retour arrière, qui s.toLowerCase() !== sest nécessaire.

Vous pouvez utiliser un KeyboardEventpour détecter de nombreuses touches, y compris le verrouillage des majuscules sur les navigateurs les plus récents.

La getModifierStatefonction fournira l'état pour:

• Alt
• AltGraph
• Verrouillage des majuscules
• Contrôle
• Fn (Android)
• Meta
• NumLock
• OS (Windows et Linux)
• Verrouillage du défilement
• Décalage

Cette démo fonctionne dans tous les principaux navigateurs, y compris les mobiles ( caniuse ).

passwordField.addEventListener( 'keydown', function( event ) {
  var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
  console.log( caps ); // true when you press the keyboard CapsLock key
});

Vous pouvez détecter le verrouillage des majuscules en utilisant "est une lettre majuscule et aucun décalage appuyé" en utilisant une capture de touche sur le document. Mais alors vous feriez mieux de vous assurer qu'aucun autre gestionnaire de pression de touche ne fait apparaître la bulle d'événement avant qu'elle ne parvienne au 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 pouvez saisir l'événement pendant la phase de capture dans les navigateurs qui prennent en charge cela, mais cela semble quelque peu inutile car il ne fonctionnera pas sur tous les navigateurs.

Je ne vois pas d'autre moyen de détecter réellement le statut de verrouillage des majuscules. La vérification est de toute façon simple 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 24 façons l'année dernière. Assez bien, mais manque de support de caractère international (utilisez toUpperCase()pour contourner cela).

De nombreuses réponses existantes vérifieront le verrouillage des majuscules lorsque la touche Maj n'est pas enfoncée mais ne le vérifieront pas si vous appuyez sur la touche Maj et obtenez des minuscules, ou vérifiera cela mais ne vérifiera pas non plus que le verrouillage des majuscules est désactivé, ou vérifiera cela mais considérera les clés 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 (Maj ou pas de décalage), désactivera l'avertissement si une touche alpha est pressée sans majuscules, mais ne désactivera ou n'activera pas l'avertissement lorsque les chiffres ou autres touches sont enfoncé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)
  });

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

$('#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();
    }
});

Les meilleures réponses ici n'ont pas fonctionné pour moi pour deux raisons (code non commenté avec un lien mort et une solution incomplète). J'ai donc passé quelques heures à essayer tout le monde et à tirer le meilleur parti possible: voici le mien, y compris jQuery et non-jQuery.

jQuery

Notez que jQuery normalise l'objet d'événement de sorte que certaines vérifications sont manquantes. Je l'ai également réduit à tous les champs de mot de passe (car c'est la principale raison d'en avoir besoin) et ajouté un message d'avertissement. Cela a été testé dans Chrome, Mozilla, Opera et IE6-8. Stable et attrape tous les états de verrouillage, SAUF lorsque les chiffres ou les espaces sont enfoncés.

/* check for CAPS LOCK on all password fields */
$("input[type='password']").keypress(function(e) {

    var $warn = $(this).next(".capsWarn"); // handle the warning mssg
    var kc = e.which; //get keycode
    var isUp = (kc >= 65 && kc <= 90) ? true : false; // uppercase
    var isLow = (kc >= 97 && kc <= 122) ? true : false; // lowercase
    // event.shiftKey does not seem to be normalized by jQuery(?) for IE8-
    var isShift = ( e.shiftKey ) ? e.shiftKey : ( (kc == 16) ? true : false ); // shift is pressed

    // uppercase w/out shift or lowercase with shift == caps lock
    if ( (isUp && !isShift) || (isLow && isShift) ) {
        $warn.show();
    } else {
        $warn.hide();
    }

}).after("<span class='capsWarn error' style='display:none;'>Is your CAPSLOCK on?</span>");

Sans jQuery

Certaines des autres solutions sans jQuery manquaient de solutions de repli IE. @Zappa l'a corrigé.

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

    var kc = ( e.keyCode ) ? e.keyCode : e.which; // get keycode
    var isUp = (kc >= 65 && kc <= 90) ? true : false; // uppercase
    var isLow = (kc >= 97 && kc <= 122) ? true : false; // lowercase
    var isShift = ( e.shiftKey ) ? e.shiftKey : ( (kc == 16) ? true : false ); // shift is pressed -- works for IE8-

    // uppercase w/out shift or lowercase with shift == caps lock
    if ( (isUp && !isShift) || (isLow && isShift) ) {
        alert("CAPSLOCK is on."); // do your thing here
    } else {
        // no CAPSLOCK to speak of
    }

}

Remarque: Découvrez les solutions de @Borgar, @Joe Liversedge et @Zappa, et le plugin développé par @Pavel Azanov, que je n'ai pas essayé mais c'est une bonne idée. Si quelqu'un connaît un moyen d'étendre la portée au-delà de A-Za-z, veuillez le modifier. De plus, les versions jQuery de cette question sont fermées en double, c'est pourquoi je poste les deux ici.

Nous utilisons getModifierStatepour vérifier le verrouillage des majuscules, il s'agit uniquement d'un membre d'un événement de souris ou de clavier, nous ne pouvons donc pas utiliser de onfocus. Les deux moyens les plus courants pour que le champ de mot de passe soit mis en évidence sont un clic ou un onglet. Nous utilisons onclickpour vérifier un clic de souris dans l'entrée, et nous utilisonsonkeyup pour détecter un onglet du champ de saisie précédent. Si le champ de mot de passe est le seul champ de la page et est auto-focalisé, l'événement ne se produira pas jusqu'à ce que la première clé soit relâchée, ce qui est correct mais pas idéal, vous voulez vraiment que les astuces de l'outil de verrouillage des majuscules s'affichent une fois le champ de mot de passe gagné concentrer, mais dans la plupart des cas, cette solution fonctionne comme un charme.

HTML

<input type="password" id="password" onclick="checkCapsLock(event)" onkeyup="checkCapsLock(event)" />

JS

function checkCapsLock(e) {
  if (e.getModifierState("CapsLock")) {
    console.log("Caps");
  }
}

https://codepen.io/anon/pen/KxJwjq

Je sais que c'est un vieux sujet, mais j'ai pensé que j'allais réagir au cas où cela aiderait les autres. Aucune des réponses à la question ne semble fonctionner dans IE8. J'ai cependant trouvé ce code qui fonctionne dans IE8. (Havent n'a encore rien testé sous IE8). Cela peut être facilement modifié pour jQuery si nécessaire.

function capsCheck(e,obj){ 
    kc = e.keyCode?e.keyCode:e.which;  
    sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);  
    if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk)){
        document.getElementById('#'+obj.id).style.visibility = 'visible';
    } 
    else document.getElementById('#'+obj.id).style.visibility = 'hidden';
}

Et la fonction est appelée via l'événement onkeypress comme ceci:

<input type="password" name="txtPassword" onkeypress="capsCheck(event,this);" />
<div id="capsWarningDiv" style="visibility:hidden">Caps Lock is on.</div> 

Il s'agit d'une solution qui, en plus de vérifier l'état lors de l'écriture, bascule également le message d'avertissement chaque fois que la Caps Locktouche est enfoncée (avec certaines limitations).

Il prend également en charge les lettres non anglaises en dehors de la plage AZ, car il vérifie le caractère de chaîne par rapport toUpperCase()et toLowerCase()au lieu de vérifier par rapport à la plage de caractères.

$(function(){
  //Initialize to hide caps-lock-warning
  $('.caps-lock-warning').hide();

  //Sniff for Caps-Lock state
  $("#password").keypress(function(e) {
    var s = String.fromCharCode( e.which );
    if((s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey)||
       (s.toUpperCase() !== s && s.toLowerCase() === s && e.shiftKey)) {
      this.caps = true; // Enables to do something on Caps-Lock keypress
      $(this).next('.caps-lock-warning').show();
    } else if((s.toLowerCase() === s && s.toUpperCase() !== s && !e.shiftKey)||
              (s.toLowerCase() !== s && s.toUpperCase() === s && e.shiftKey)) {
      this.caps = false; // Enables to do something on Caps-Lock keypress
      $(this).next('.caps-lock-warning').hide();
    }//else else do nothing if not a letter we can use to differentiate
  });

  //Toggle warning message on Caps-Lock toggle (with some limitation)
  $(document).keydown(function(e){
    if(e.which==20){ // Caps-Lock keypress
      var pass = document.getElementById("password");
      if(typeof(pass.caps) === 'boolean'){
        //State has been set to a known value by keypress
        pass.caps = !pass.caps;
        $(pass).next('.caps-lock-warning').toggle(pass.caps);
      }
    }
  });

  //Disable on window lost focus (because we loose track of state)
  $(window).blur(function(e){
    // If window is inactive, we have no control on the caps lock toggling
    // so better to re-set state
    var pass = document.getElementById("password");
    if(typeof(pass.caps) === 'boolean'){
      pass.caps = null;
      $(pass).next('.caps-lock-warning').hide();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="password" id="password" />
<span class="caps-lock-warning" title="Caps lock is on!">CAPS</span>

Notez que l'observation du basculement du verrouillage des majuscules n'est utile que si nous connaissons l'état du verrouillage des majuscules avant d' Caps Lockappuyer sur la touche. L'état de verrouillage des majuscules actuel est conservé avec uncaps propriété JavaScript sur l'élément de mot de passe. Ceci est défini la première fois que nous avons une validation de l'état de verrouillage des majuscules lorsque l'utilisateur appuie sur une lettre qui peut être en majuscule ou en minuscule. Si la fenêtre perd le focus, nous ne pouvons plus observer le basculement du verrouillage des majuscules, nous devons donc revenir à un état inconnu.

Récemment, il y avait une question similaire sur hashcode.com, et j'ai créé un plugin jQuery pour y faire face. Il prend également en charge la reconnaissance du verrouillage des majuscules sur les numéros. (Sur le clavier allemand standard, le verrouillage des majuscules a un effet sur les nombres).

Vous pouvez vérifier la dernière version ici: jquery.capsChecker

Pour jQuery avec twitter bootstrap

Vérifiez les majuscules verrouillées pour les caractères suivants:

AZ majuscule ou 'Ä', 'Ö', 'Ü', '!', '"', '§', '$', '%', '&', '/', '(', ')' , '=', ':', ';', '*', '' '

aZ ou 0-9 en minuscules ou 'ä', 'ö', 'ü', '.', ',', '+', '#'

/* check for CAPS LOCK on all password fields */
$("input[type='password']").keypress(function(e) {
    var kc = e.which; // get keycode

    var isUpperCase = ((kc >= 65 && kc <= 90) || (kc >= 33 && kc <= 34) || (kc >= 36 && kc <= 39) || (kc >= 40 && kc <= 42) || kc == 47 || (kc >= 58 && kc <= 59) || kc == 61 || kc == 63 || kc == 167 || kc == 196 || kc == 214 || kc == 220) ? true : false; // uppercase A-Z or 'Ä', 'Ö', 'Ü', '!', '"', '§', '$', '%', '&', '/', '(', ')', '=', ':', ';'
    var isLowerCase = ((kc >= 97 && kc <= 122) || (kc >= 48 && kc <= 57) || kc == 35 || (kc >= 43 && kc <= 44) || kc == 46 || kc == 228 || kc == 223 || kc == 246 || kc == 252) ? true : false; // lowercase a-Z or 0-9 or 'ä', 'ö', 'ü', '.', ','

    // event.shiftKey does not seem to be normalized by jQuery(?) for IE8-
    var isShift = (e.shiftKey) ? e.shiftKey : ((kc == 16) ? true : false); // shift is pressed

    // uppercase w/out shift or lowercase with shift == caps lock
    if ((isUpperCase && !isShift) || (isLowerCase && isShift)) {
        $(this).next('.form-control-feedback').show().parent().addClass('has-warning has-feedback').next(".capsWarn").show();
    } else {
        $(this).next('.form-control-feedback').hide().parent().removeClass('has-warning has-feedback').next(".capsWarn").hide();
    }
}).after('<span class="glyphicon glyphicon-warning-sign form-control-feedback" style="display:none;"></span>').parent().after("<span class='capsWarn text-danger' style='display:none;'>Is your CAPSLOCK on?</span>");

démo en direct sur jsfiddle

Une variable qui montre l'état de verrouillage des majuscules:

let isCapsLockOn = false;

document.addEventListener( 'keydown', function( event ) {
  var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
  if(isCapsLockOn !== caps) isCapsLockOn = caps;
});

document.addEventListener( 'keyup', function( event ) {
  var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
  if(isCapsLockOn !== caps) isCapsLockOn = caps;
});

fonctionne sur tous les navigateurs => canIUse

Cette réponse basée sur jQuery publiée par @ user110902 m'a été utile. Cependant, je l'ai un peu amélioré pour éviter une faille mentionnée dans le commentaire de @B_N: il n'a pas réussi à détecter CapsLock lorsque vous appuyez sur Shift:

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

Comme cela, cela fonctionnera même en appuyant sur Maj.

Ce code détecte le verrouillage des majuscules quel que soit le cas ou si la touche Maj est enfoncée:

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

J'ai écrit une bibliothèque appelée capsLock qui fait exactement ce que vous voulez qu'elle fasse.

Il suffit de l'inclure sur vos pages Web:

<script src="https://rawgit.com/aaditmshah/capsLock/master/capsLock.js"></script>

Ensuite, utilisez-le comme suit:

alert(capsLock.status);

capsLock.observe(function (status) {
    alert(status);
});

Voir la démo: http://jsfiddle.net/3EXMd/

Le statut est mis à jour lorsque vous appuyez sur la touche de verrouillage des majuscules. Il utilise uniquement le hack de touche Maj pour déterminer l'état correct de la touche de verrouillage des majuscules. Initialement, le statut est false. Alors méfiez-vous.

Encore une autre version, claire et simple, gère les capsLock décalés, et non contraint à l'ascii je pense:

document.onkeypress = function (e)
{
    e = e || window.event;
    if (e.charCode === 0 || e.ctrlKey || document.onkeypress.punctuation.indexOf(e.charCode) >= 0)
        return;
    var s = String.fromCharCode(e.charCode); // or e.keyCode for compatibility, but then have to handle MORE non-character keys
    var s2 = e.shiftKey ? s.toUpperCase() : s.toLowerCase();
    var capsLockOn = (s2 !== s);
    document.getElementById('capslockWarning').style.display = capsLockOn ? '' : 'none';
}
document.onkeypress.punctuation = [33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,91,92,93,94,95,96,123,124,125,126];

Edit: le sens de capsLockOn a été inversé, doh, corrigé.

Edit # 2: Après avoir vérifié cela un peu plus, j'ai apporté quelques modifications, un code un peu plus détaillé malheureusement, mais il gère plus d'actions de manière appropriée.

• L'utilisation de e.charCode au lieu de e.keyCode et la vérification des valeurs 0 sautent un grand nombre de pressions de touches sans caractère, sans coder quoi que ce soit de spécifique à une langue ou à un jeu de caractères donné. D'après ma compréhension, il est légèrement moins compatible, donc les navigateurs plus anciens, non traditionnels ou mobiles peuvent ne pas se comporter comme le prévoit ce code, mais cela en vaut la peine, pour ma situation de toute façon.

• La vérification par rapport à une liste de codes de ponctuation connus les empêche d'être considérés comme de faux négatifs, car ils ne sont pas affectés par le verrouillage des majuscules. Sans cela, l'indicateur de verrouillage des majuscules est masqué lorsque vous tapez l'un de ces caractères de ponctuation. En spécifiant un ensemble exclu, plutôt qu'un inclus, il devrait être plus compatible avec les caractères étendus. C'est le bit le plus laid et le plus casé, et il y a une chance que les langues non occidentales aient suffisamment de codes de ponctuation et / ou de ponctuation différents pour être un problème, mais encore une fois ça vaut le coup IMO, au moins pour ma situation.

Réagir

onKeyPress(event) { 
        let self = this;
        self.setState({
            capsLock: isCapsLockOn(self, event)
        });
    }

    onKeyUp(event) { 
        let self = this;
        let key = event.key;
        if( key === 'Shift') {
            self.shift = false;
        }
    }

    <div>
     <input name={this.props.name} onKeyDown={(e)=>this.onKeyPress(e)} onKeyUp={(e)=>this.onKeyUp(e)} onChange={this.props.onChange}/>
                {this.capsLockAlert()}
</div>

function isCapsLockOn(component, event) {
        let key = event.key;
        let keyCode = event.keyCode;

        component.lastKeyPressed = key;

        if( key === 'Shift') {
            component.shift = true;
        } 

        if (key === 'CapsLock') {
            let newCapsLockState = !component.state.capsLock;
            component.caps = newCapsLockState;
            return newCapsLockState;
        } else {
            if ((component.lastKeyPressed !== 'Shift' && (key === key.toUpperCase() && (keyCode >= 65 && keyCode <= 90)) && !component.shift) || component.caps ) {
                component.caps = true;
                return true;
            } else {
                component.caps = false;
                return false;
            }
        }
    }

Basé sur la réponse de @joshuahedlund car cela a bien fonctionné pour moi.

J'ai fait du code une fonction pour qu'il puisse être réutilisé et je l'ai lié au corps dans mon cas. Il ne peut être lié au champ de mot de passe que si vous préférez.

<html>
<head>
<script language="javascript" type="text/javascript" >
function checkCapsLock(e, divId) { 
    if(e){
        e = e;
    } else {
        e = window.event;
    }
    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)) {
        $(divId).style.display='block';
    } else if ((s.toLowerCase() === s && s.toUpperCase() !== s && !e.shiftKey)||
      (s.toLowerCase() !== s && s.toUpperCase() === s && e.shiftKey)) { //caps is off
        $(divId).style.display='none';
   } //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)
 }
</script>
<style>    
.errorDiv {
    display: none;
    font-size: 12px;
    color: red;
    word-wrap: break-word;
    text-overflow: clip;
    max-width: 200px;
    font-weight: normal;
}
</style>
</head>
<body  onkeypress="checkCapsLock(event, 'CapsWarn');" >
...
<input name="password" id="password" type="password" autocomplete="off">
<div id="CapsWarn" class="errorDiv">Capslock is ON !</div>
...
</body>
</html>

La réponse de Mottie et Diego Vieira ci-dessus est ce que nous avons fini par utiliser et devrait être la réponse acceptée maintenant. Cependant, avant de le remarquer, j'ai écrit cette petite fonction javascript qui ne s'appuie pas sur les codes de caractères ...

var capsLockIsOnKeyDown = {shiftWasDownDuringLastChar: false,
  capsLockIsOnKeyDown: function(event) {
    var eventWasShiftKeyDown = event.which === 16;
    var capsLockIsOn = false;
    var shifton = false;
    if (event.shiftKey) {
        shifton = event.shiftKey;
    } else if (event.modifiers) {
        shifton = !!(event.modifiers & 4);
    }

    if (event.target.value.length > 0 && !eventWasShiftKeyDown) {
      var lastChar = event.target.value[event.target.value.length-1];
      var isAlpha = /^[a-zA-Z]/.test(lastChar);

      if (isAlpha) {
        if (lastChar.toUpperCase() === lastChar && lastChar.toLowerCase() !== lastChar
          && !event.shiftKey && !capsLockIsOnKeyDown.shiftWasDownDuringLastChar) {
          capsLockIsOn =  true;
        }
      }
    }
    capsLockIsOnKeyDown.shiftWasDownDuringLastChar = shifton;
    return capsLockIsOn;
  }
}

Ensuite, appelez-le dans un gestionnaire d'événements comme ça capsLockIsOnKeyDown.capsLockIsOnKeyDown(event)

Mais encore une fois, nous avons fini par utiliser la réponse de @Mottie et @Diego Vieira

Dans ce code ci-dessous, il sera affiché une alerte lorsque les majuscules se verrouillent et qu'ils appuient sur la touche en utilisant Maj

si nous retournons faux; alors le caractère actuel ne s'ajoutera pas à la page de texte.

$('#password').keypress(function(e) { 
    // e.keyCode is not work in FF, SO, it will
    // automatically get the value of e.which.  
    var s = String.fromCharCode( e.keyCode || e.which );
    if ( s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey ) {
            alert('caps is on');
            return false;
    }
else  if ( s.toUpperCase() !== s) {
            alert('caps is on and Shiftkey pressed');
            return false;
    }
});

essayez ce code simple et facile à comprendre

Ceci est le script

 <script language="Javascript">
function capLock(e){
 kc = e.keyCode?e.keyCode:e.which;
 sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);
 if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk))
  document.getElementById('divMayus').style.visibility = 'visible';
 else
   document.getElementById('divMayus').style.visibility = 'hidden';
}
</script>

Et le Html

<input type="password" name="txtPassword" onkeypress="capLock(event)" />
 <div id="divMayus" style="visibility:hidden">Caps Lock is on.</div> 

essayez d'utiliser ce code.

$('selectorOnTheInputTextBox').keypress(function (e) {
        var charCode = e.target.value.charCodeAt(e.target.value.length - 1)
        var capsOn = 
            e.keyCode && 
            !e.shiftKey &&
            !e.ctrlKey &&
            charCode >= 65 && 
            charCode <= 90;

            if (capsOn) 
               //action if true
            else
               //action if false
});

Bonne chance :)

Vous pouvez utiliser ce script . Cela devrait bien fonctionner sous Windows même si vous appuyez sur la touche Maj mais cela ne fonctionnera pas sous Mac OS.

Voici un plugin jquery personnalisé, utilisant jquery ui, composé de toutes les bonnes idées sur cette page et exploite le widget info-bulle. Le message de verrouillage des majuscules s'applique automatiquement à toutes les zones de mot de passe et ne nécessite aucune modification de votre code HTML actuel.

Code de plug-in personnalisé ...

(function ($) {
    $.fn.capsLockAlert = function () {
        return this.each(function () {
            var capsLockOn = false;
            var t = $(this);
            var updateStatus = function () {
                if (capsLockOn) {
                    t.tooltip('open');
                } else {
                    t.tooltip('close');
                }
            }
            t.tooltip({
                items: "input",
                position: { my: "left top", at: "left bottom+10" },
                open: function (event, ui) {
                    ui.tooltip.css({ "min-width": "100px", "white-space": "nowrap" }).addClass('ui-state-error');
                    if (!capsLockOn) t.tooltip('close');
                },
                content: function () {
                    return $('<p style="white-space: nowrap;"/>')
                        .append($('<span class="ui-icon ui-icon-alert" style="display: inline-block; margin-right: 5px; vertical-align: text-top;" />'))
                        .append('Caps Lock On');
                }
            })
            .off("mouseover mouseout")
            .keydown(function (e) {
                if (e.keyCode !== 20) return;
                capsLockOn = !capsLockOn;
                updateStatus();
            })
            .keypress(function (e) {
                var kc = e.which; //get keycode

                var isUp = (kc >= 65 && kc <= 90) ? true : false; // uppercase
                var isLow = (kc >= 97 && kc <= 122) ? true : false; // lowercase
                if (!isUp && !isLow) return; //This isn't a character effected by caps lock

                // event.shiftKey does not seem to be normalized by jQuery(?) for IE8-
                var isShift = (e.shiftKey) ? e.shiftKey : ((kc === 16) ? true : false); // shift is pressed

                // uppercase w/out shift or lowercase with shift == caps lock
                if ((isUp && !isShift) || (isLow && isShift)) {
                    capsLockOn = true;
                } else {
                    capsLockOn = false;
                }
                updateStatus();
            });
        });
    };
})(jQuery);

Appliquer à tous les éléments de mot de passe ...

$(function () {
    $(":password").capsLockAlert();
});

Code Javascript

<script type="text/javascript">
   function isCapLockOn(e){
   kc = e.keyCode?e.keyCode:e.which;
   sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);
   if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk))
       document.getElementById('alert').style.visibility = 'visible';
   else
       document.getElementById('alert').style.visibility = 'hidden';
   }
</script>

Nous devons maintenant associer ce script à l'aide de Html

<input type="password" name="txtPassword" onkeypress="isCapLockOn(event)" />
<div id="alert" style="visibility:hidden">Caps Lock is on.</div> 

il est tard, je sais, mais cela peut être utile à quelqu'un d'autre.

voici donc ma solution la plus simple (avec des caractères turcs);

function (s,e)
{
    var key = e.htmlEvent.key;

    var upperCases = 'ABCÇDEFGĞHIİJKLMNOÖPRSŞTUÜVYZXWQ';
    var lowerCases = 'abcçdefgğhıijklmnoöprsştuüvyzxwq';
    var digits = '0123456789';

    if (upperCases.includes(key))
    {
        document.getElementById('spanLetterCase').innerText = '[A]';
    }

    else if (lowerCases.includes(key))
    {
        document.getElementById('spanLetterCase').innerText = '[a]';
    }

    else if (digits.includes(key))
    {
        document.getElementById('spanLetterCase').innerText = '[1]';
    }

    else
    {
        document.getElementById('spanLetterCase').innerText = '';
    }
}

J'ai donc trouvé cette page et je n'ai pas vraiment aimé les solutions que j'ai trouvées, alors j'en ai trouvé une et je la propose à vous tous. Pour moi, cela n'a d'importance que si le verrouillage des majuscules est activé si je tape des lettres. Ce code a résolu le problème pour moi. C'est rapide et facile et vous donne une variable capsIsOn à référencer chaque fois que vous en avez besoin.

let capsIsOn=false;
let capsChecked=false;

let capsCheck=(e)=>{
    let letter=e.key;
    if(letter.length===1 && letter.match(/[A-Za-z]/)){
        if(letter!==letter.toLowerCase()){
          capsIsOn=true;
          console.log('caps is on');
        }else{
          console.log('caps is off');
        }
        capsChecked=true;
        window.removeEventListener("keyup",capsCheck);
    }else{
      console.log("not a letter, not capsCheck was performed");
    }

}

window.addEventListener("keyup",capsCheck);

window.addEventListener("keyup",(e)=>{
  if(capsChecked && e.keyCode===20){
    capsIsOn=!capsIsOn;
  }
});

Lorsque vous tapez, si caplock est activé, il pourrait convertir automatiquement le caractère actuel en minuscules. De cette façon, même si caplocks est activé, il ne se comportera pas comme sur la page actuelle. Pour informer vos utilisateurs, vous pouvez afficher un texte indiquant que caplocks est activé, mais que les entrées du formulaire sont converties.

Il existe une solution beaucoup plus simple pour détecter le verrouillage des majuscules:

function isCapsLockOn(event) {
    var s = String.fromCharCode(event.which);
    if (s.toUpperCase() === s && s.toLowerCase() !== s && !event.shiftKey) {
        return true;
    }
}