Comment savoir si le verrouillage des majuscules est activé avec JavaScript?
Comment savoir si le verrouillage des majuscules est activé avec JavaScript?
Une mise en garde cependant: je l'ai fait sur Google et la meilleure solution que j'ai trouvée consistait à attacher un événement onkeypress à chaque entrée, puis à vérifier à chaque fois si la lettre appuyée était en majuscule et si c'était le cas, puis à vérifier si le décalage était également maintenu. Sinon, le verrouillage des majuscules doit être activé. Cela semble vraiment sale et juste ... inutile - il y a sûrement un meilleur moyen que cela?
Trouvé cet intéressant .... Vous pouvez l'essayer ..
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 clés suivantes selon les besoins. Vous devez obtenir la plage de codes d'activation pour les caractères qui vous intéressent, éventuellement en utilisant un tableau de correspondances contenant toutes les clés de cas d'utilisation valides que vous adressez ...
a majuscules-Z ou 'Ä', 'Ö', 'Ü', minuscules a-Z 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, s.toLowerCase() !== s est nécessaire.
Vous pouvez utiliser une KeyboardEvent pour détecter de nombreuses clés, y compris le verrouillage majuscule sur les navigateurs les plus récents.
La fonction getModifierState fournira l'état pour:
- Alt
- AltGraph
- Verrouillage des majuscules
- Contrôle
- Fn (Android)
- Méta
- Verrouillage numérique
- OS (Windows et Linux)
- Verrouillage du défilement
- Décalage
Cette démo fonctionne dans tous les principaux navigateurs, y compris mobile ( caniuse ).
document.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 à l’aide de la touche "sa lettre est en majuscule et sans majuscule" à l’aide d’une saisie au clavier sur le document. Mais alors, vous feriez mieux de vous assurer qu'aucun autre gestionnaire de pression de touche n'apparaît dans 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 le prennent en charge, mais cela semble un peu inutile car cela ne fonctionnera pas sur tous les navigateurs.
Je ne vois pas d'autre moyen de détecter le statut de verrouillage des majuscules. De toute façon, la vérification est simple et si des caractères non détectables étaient saisis, alors ... la détection n’était pas nécessaire.
Il y avait un article sur 24 façons sur cette dernière année. Assez bien, mais manque de support pour les caractères internationaux (utilisez toUpperCase() pour le contourner).
De nombreuses réponses existantes vérifieront si les majuscules sont verrouillées lorsque vous n'appuyez pas sur Maj, mais ne le vérifierez pas si vous appuyez sur Shift et obtenez des minuscules. considérera les clés non alpha comme étant «désactivées». Voici une solution jQuery adaptée qui affiche un avertissement si une touche alpha est enfoncée avec des majuscules (Maj ou pas), éteint l’avertissement si une touche alpha est enfoncée sans majuscule, mais ne l’active ni ne s'allume des chiffres ou d'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érifie les caractères inattendus en majuscules et en minuscules. Cela présuppose un élément <input id="password" type="password" name="whatever"/> et un élément distinct avec l'ID 'capsLockWarning' contenant l'avertissement que nous voulons afficher (mais 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 principales réponses ne fonctionnent pas pour moi pour plusieurs raisons (code non commenté avec un lien mort et une solution incomplète). J'ai donc passé quelques heures à essayer de faire en sorte que tout le monde soit au mieux possible: voici le mien, y compris jQuery et non-jQuery.
jQuery
Notez que jQuery normalise l’objet événement et qu’il manque donc certaines vérifications. Je l'ai également réduit à tous les champs de mot de passe (car c'est la raison principale pour en avoir besoin) et ajouté un message d'avertissement. Cela a été testé dans Chrome, Mozilla, Opera et IE6-8. Stable et intercepte tous les états majuscules SAUF lorsque des chiffres ou des espaces sont appuyé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, ainsi que le plug-in développé par @Pavel Azanov, que je n'ai pas essayé, mais qui est une bonne idée. Si quelqu'un connaît un moyen d'étendre la portée au-delà de A-Za-z, veuillez éditer au loin. De plus, les versions jQuery de cette question sont fermées en double, c'est pourquoi je poste les deux ici.
Je sais que c’est un sujet ancien, mais je pensais pouvoir vous répondre 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. (N'a encore rien testé en dessous de 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>
C’est une solution qui, en plus de vérifier l’état lors de l’écriture, bascule également le message d’avertissement chaque fois que Caps Lock la touche 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 la chaîne avec toUpperCase() et toLowerCase() au lieu de vérifier avec 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 verrouillage des majuscules n’est utile que si nous connaissons l’état des verrous avant le Caps Lock la touche est enfoncée. L'état de verrouillage majuscule actuel est conservé avec une propriété JavaScript caps sur l'élément mot de passe. Ceci est défini la première fois que nous obtenons une validation de l'état de verrouillage majuscule 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.
Nous utilisons getModifierState pour 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 manières les plus courantes pour le champ mot de passe d'obtenir le focus est avec un clic ou un onglet. Nous utilisons onclick pour rechercher un clic de souris dans l’entrée et nous utilisons onkeyup pour détecter un onglet dans le champ de saisie précédent. Si le champ mot de passe est le seul champ de la page et qu'il est auto-ciblé, l'événement ne se produira pas tant que la première clé n'aura pas été relâchée, ce qui est correct mais pas idéal. se 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");
}
}
Une variable indiquant l'état de verrouillage majuscule:
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
Pour jQuery avec bootstrap Twitter
Vérifiez les majuscules verrouillées pour les caractères suivants:
aZ majuscule ou "Ä", "Ö", "Ü", "!", "", "§", "$", "%", "&", "(", ")" , '=', ':', ';', '*', '' '
a-Z ou 0-9 minuscule 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>");
Récemment, il y avait une question similaire sur hashcode.com, et j'ai créé un plugin jQuery pour le gérer. Il prend également en charge la reconnaissance des majuscules sur les chiffres. (Sur le clavier allemand standard, la majuscule a un effet sur les chiffres).
Vous pouvez vérifier la dernière version ici: jquery.capsChecker
Ce code détecte le verrouillage des majuscules, quel que soit le cas ou si vous appuyez sur la touche Maj.
$('#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');
}
});
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;
}
}
}
Encore une autre version, claire et simple, gère les majuscules décalées et ne se limite pas à 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 était inversé, doh, corrigé.
Edit # 2: Après avoir vérifié cela de nouveau, 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 recherche de valeurs 0 permettent d'éviter de nombreuses touches autres que des caractères, sans coder quoi que ce soit propre à une langue ou à un jeu de caractères donné. À ma connaissance, il est un peu moins compatible, de sorte que les navigateurs plus âgés, non grand public ou mobiles peuvent ne pas se comporter comme le code le prévoit, mais cela en vaut la peine, dans mon cas de toute façon.
Le contrôle 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 ensemble, il devrait être plus compatible avec les caractères étendus. C'est la partie la plus laide et la plus spéciale, et il y a une chance que les langues non occidentales aient suffisamment de ponctuation et/ou de codes de ponctuation différents pour être un problème, mais encore une fois, ça en vaut la peine, OMI, au moins pour ma situation.
J'ai écrit une bibliothèque appelée capsLock qui fait exactement ce que vous voulez.
Il suffit de l'inclure sur vos pages Web:
<script src="https://rawgit.com/aaditmshah/capsLock/master/capsLock.js"></script>
Puis 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 Caps Lock. Il utilise uniquement le hack de la touche Maj pour déterminer le statut correct de la touche de verrouillage des majuscules. Au départ, le statut est false. Alors méfiez-vous.
Cette réponse basée sur jQuery posted by @ 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: la détection de CapsLock a échoué 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 Shift.
Mottie et Diego Vieiraréponse ci-dessus est ce que nous avons finalement utilisé et devrait être la réponse acceptée maintenant. Cependant, avant de m'en rendre compte, j'ai écrit cette petite fonction javascript qui ne repose pas sur des 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;
}
}
Puis appelez-le dans un gestionnaire d’événements tel que capsLockIsOnKeyDown.capsLockIsOnKeyDown(event)
Mais encore une fois, nous n’avons utilisé que les réponses de @Mottie s et @Diego Vieira
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 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>
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 = '';
}
}
Dans ce code ci-dessous, il sera montré l'alerte lorsque les majuscules se verrouillent et qu'elles appuient sur la touche Maj.
si nous retournons faux; alors le caractère actuel ne sera pas ajouté à 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 dans facile à comprendre
C'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>
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>
Vous pouvez utiliser ce script . Cela devrait fonctionner sous Windows même si la touche Maj est enfoncée, mais cela ne fonctionnera pas sous Mac OS si tel est le cas.
Voici un plugin jquery personnalisé, utilisant jquery ui, composé de toutes les bonnes idées de cette page et exploitant le widget Infobulle. Le message de verrouillage majuscule s'applique automatiquement à toutes les zones de mot de passe et ne nécessite aucune modification de votre code HTML actuel.
Custom plug in code ...
(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();
});
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 :)
Donc, j'ai trouvé cette page et n'aimais pas vraiment les solutions que j'ai trouvées, alors j'ai trouvé l'une d'elles et je vous l'offre à tous. Pour moi, seul le verrouillage des majuscules est important si je tape des lettres. Ce code a résolu le problème pour moi. C'est simple et rapide 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;
}
});