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


242

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?


198
PARCE QUE TROP DE NOMBREUX UTILISATEURS REMPLISSENT LEURS FORMULAIRES COMME CELA.
nickf

7
@nicf: Si c'est la raison, pourquoi n'exécutez-vous pas une expression rationnelle sur l'entrée et leur demandez-vous d'arrêter de crier s'il y a trop de majuscules?
certains

155
Il y a une bien meilleure raison de le faire. Si un utilisateur entre un mot de passe, il serait très utile de l'avertir si son verrouillage est activé.
T Nguyen

23
Il semble que les navigateurs devraient implémenter un avertissement "le verrouillage des majuscules est input type=passwordinput type=email
activé

8
Excellente question, mais la réponse acceptée a 8 ans. La meilleure réponse est ici
Mac

Réponses:


95

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.


1
Ce n'est peut-être pas la meilleure implémentation mais quand je l'ai écrite, j'essayais de rester simple. Je pense que la seule façon de le faire avec la méchanceté dont vous avez besoin pour couvrir différents navigateurs.

2
J'ai trouvé que l'utilisation de ceci avec keydown (en chrome) fait que tous les codes sont récupérés comme des majuscules. Si j'utilise la touche, cela fonctionne.
Tim

2
Trouver chaque combinaison de caractères possible pour tous les caractères internationaux est voué à manquer certains cas. Utilisez plutôt les méthodes toUpper / Lower case pour vérifier la casse.
awe

3
Étonnant qu'une réponse complètement fausse - confondant les codes de caractères et l'ascii (!!!) - puisse obtenir autant de votes positifs. Personne n'a jamais vérifié ???
GameAlchemist

1
Notez que selon Mozilla , event.which a été supprimé des standards Web.
verism

130

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.


5
en fait ... fromCharCode a éliminé le besoin pour moi de même vérifier. Cependant, il convient de noter que la pression sur la touche et la pression sur la touche donnent des codes de caractères différents, ce qui était le cas où je me suis trompé en premier lieu.
Shea

4
-1 bc cela fonctionne UNIQUEMENT s'ils n'ont pas appuyé sur shift pendant que CAPS est activé.

1
Si quelqu'un veut voir un exemple en direct avec bootstrap, vous pouvez le voir ici bootply.com/91792
Govinda Rajbhar

Cette réponse m'a été utile. J'ai amélioré le conditionnel dans cette réponse , en raison de la faille mentionnée par @D_N, qu'il ne fonctionne pas en appuyant sur Maj.
SebasSBM

105

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
});

6
J'ai répondu à cette question sur une question similaire / dupe et j'ai été informé par un autre utilisateur que cela prend désormais en charge Chrome. Je l'ai confirmé, donc fonctionne maintenant sur tous les principaux navigateurs - et devrait être la meilleure solution à cette question
Ian Clark

caniuse.com/#search=getModifierState dit qu'il n'est actuellement pas pris en charge sur Safari (encore?). Donc, pour tous les principaux navigateurs, ce n'est peut-être pas encore le cas.
Jens Kooij

2
Il est désormais pris en charge dans Safari.
Mottie

1
Et pourtant, il détecte la presse capslock et ne peut pas obtenir l'état capslock général lorsque l'utilisateur entre dans le formulaire ...
SparK

Cela semble fonctionner sauf lorsque vous appuyez sur la touche de verrouillage des majuscules en position d' arrêt . Il ne capte pas cette entrée jusqu'à la prochaine pression sur une touche. C'était sur Chrome pour OS X. Je ne sais pas si c'est quelque chose qui s'étend sur les navigateurs et les systèmes d'exploitation.
Ashraf Slamang

24

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).


C'est en fait ce que je cherchais. Cela fonctionne avec des cordes latines et cyrilliques. Merci!
Mladen Janjetovic

Cela fonctionne bien, mais des touches comme ESPACE et des chiffres signalent l'avertissement. Connaissez-vous une solution de contournement (tout aussi concise / élégante)?

1
De plus, il est bon que vous notiez l'incomplétude, mais elle est toujours incomplète. Je ne sais pas comment résoudre ce problème avec cette méthode.

11

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)
  });

11

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

Je ne sais pas pourquoi, mais cette méthode ne fonctionne pas sur la première pression de touche (testée uniquement sur Chrome).

Serait-ce le problème de masquage du champ vide? Je n'ai pas pu faire fonctionner cela correctement, au moins dans Chrome. Cela se produit automatiquement dans de nombreux autres navigateurs (au moins dans ma version, ci-dessous) car les espaces arrière comptent et effacent le mssg.

Remarque : comme vous l'avez utilisé correctement ici, vous devez utiliser l' keypressévénement pour utiliser différentes enveloppes en entrée, car les deux keydownet keyupretourneront toujours en majuscules . Par conséquent, cela ne déclenchera pas la touche de verrouillage ... si vous avez l'intention de combiner avece.originalEvent.getModifierState('CapsLock')
KyleMit

6

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.


4
Une bonne solution devrait toujours inclure la prise en charge des lettres en dehors des lettres anglaises AZ. Toute autre solution est une insulte à presque toutes les langues non anglaises.
admiration le

6

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


Superbe! Simple, concis et sans faille dans ma mise en œuvre.
2018

1
@Ryan: Merci pour la contribution! C'est un bon exemple de code, bien que j'aimerais souligner que votre réponse est fondamentalement la même que la réponse de Mottie de 2015, où vous employez tous les deuxevent.getModifierState("CapsLock").
Mac

5

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> 

Merci pour le correctif IE8. Incorporé dans ma réponse retravaillée (ci-dessous). C'est solide, cependant.

5

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.


2
Bonne idée. Si vous souhaitez avertir l'utilisateur que le verrouillage des majuscules est activé, il est probablement judicieux de désactiver cet avertissement immédiatement lorsque le verrouillage des majuscules est désactivé, sinon vous pourriez confondre l'utilisateur.
Ajedi32

3

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


3

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


3

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


1
A voté pour avoir donné une réponse à jour à une vieille question. Vous voudrez peut - être ajouter quelque chose comme un titre disant quelque chose comme « Pour les navigateurs modernes (2017->) essayer » ou « Mise à jour pour 2017 »
eon

3

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.


2

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

Cela provoque la détection d'espace et de retour arrière en majuscules sur Firefox.
Adrian Rosca

2

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.


C'est une solution vraiment ingénieuse. Mais il a le bogue que si le verrouillage des majuscules est activé lorsque la page gagne le focus, l'objet "capslock" commence avec l'état incorrect (désactivé).
Ric

En effet cela commence par un état incorrect. Cependant, lorsque vous appuyez sur une touche, il corrige automatiquement son état. Si vous pouvez trouver un moyen de le mettre à l'état correct lorsque la page gagne en focus, je serais plus qu'heureux de fusionner votre code.
Aadit M Shah

2

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.


2

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;
            }
        }
    }

1

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>

1

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


0

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;
    }
});

Fonctionne uniquement si le verrouillage des majuscules est activé. Si le verrouillage des majuscules est désactivé, il signale toujours que le verrouillage des majuscules est activé mais avec la touche Maj enfoncée (les deux avec la touche Maj enfoncée ou non).
awe

Ok Désolé à ce sujet @awe
Naga Harish M

0

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> 

0

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 :)


0

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.


0

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

0

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> 

0

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 = '';
    }
}

0

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;
  }
});


-1

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.


Oui, mais vous devrez alors détecter le verrouillage des majuscules. De plus, cela signifie que vous interdisez les majuscules dans les mots de passe, ce qui n'est pas optimal.
Dave Liepmann

pour détecter si le verrouillage des majuscules est activé, vous devez vérifier si la version en minuscule du caractère que vous avez envoyé est différente de celle-ci, si c'est le cas -> verrouillage des majuscules, puis «Attention: vous utilisez le verrouillage des majuscules mais notre système est en cours de conversion minuscule », je suppose que javascript n'est pas censé détecter le verrouillage des majuscules après tout (les vérifications de verrouillage des majuscules nécessitent un accès au système), vous devez trouver le moyen de contourner le mieux votre besoin
Frederik.L

-1

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;
    }
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.