Comment savoir si le verrouillage des majuscules est activé en utilisant JavaScript ?
https://stackoverflow.com/questions/348792
-
20-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Comment savoir si le verrouillage des majuscules est activé en utilisant JavaScript ?
Une mise en garde cependant :Je l'ai recherché sur Google et la meilleure solution que j'ai pu trouver était de joindre un onkeypress événement à chaque entrée, puis vérifiez à chaque fois si la lettre enfoncée était en majuscule, et si c'était le cas, vérifiez si la touche Shift a également été maintenue enfoncée.Si ce n'était pas le cas, le verrouillage des majuscules doit être activé.Cela semble vraiment sale et juste... gaspilleur - il y a sûrement un meilleur moyen que ça ?
La solution
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 des caractères qui vous intéressent, éventuellement en utilisant un tableau de correspondances contenant toutes les clés de cas d'utilisation valides auxquelles vous vous adressez ...
majuscule A-Z ou '& # 196;', '& # 214;', '& # 220;', a-Z minuscule ou 0-9 ou '& # 228;', '& # 246;', '& # 252;'
Les clés ci-dessus ne sont que des exemples de représentation.
Autres conseils
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 les erreurs, comme la touche Retour arrière, s.toLowerCase() !== s est nécessaire.
Vous pouvez utiliser un KeyboardEvent pour détecter de nombreuses touches, y compris le verrouillage des majuscules sur les navigateurs les plus récents.
Le getModifierState fonction fournira à l’État :
- Alt
- AltGraph
- Verrouillage des majuscules
- Contrôle
- Fn (Android)
- Méta
- Verrouillage numérique
- Système d'exploitation (Windows et Linux)
- Verrouillage du défilement
- Changement
Cette démo fonctionne dans tous les principaux navigateurs, y compris mobile (puis-je utiliser).
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 " la lettre est en majuscule et aucune touche n'est enfoncée " en utilisant une capture de touche sur le document. Mais alors, vous feriez mieux de vous assurer qu'aucun autre gestionnaire de frappe n'apparaît dans la bulle d'événements avant qu'elle n'arrive 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 pourriez saisir l'événement au cours de 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. La vérification est quand même simple et si des caractères non détectables ont été saisis, eh bien ... alors la détection n’était pas nécessaire.
Un article sur 24 façons a été publié. Très bon, mais manque de support des caractères internationaux (utilisez toUpperCase() pour contourner cela).
Beaucoup de 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 Maj et restez en minuscules. pour cela, mais considérera les clés non-alpha comme «off». Voici une solution jQuery adaptée qui affichera un avertissement si une touche alpha est enfoncée avec une touche majuscule (Maj ou pas), désactivera l’avertissement si une touche alpha est enfoncée sans majuscule, mais ne l’activera pas si vous appuyez sur des chiffres ou d'autres touches.
$("#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. Ceci couvre la gestion des événements dans Firefox et vérifie les caractères inattendus en majuscules et minuscules. Cela présuppose un élément <input id="password" type="password" name="whatever"/> et un élément distinct avec l'identifiant 'capsLockWarning' qui contient 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 ici ne m'ont pas fonctionné 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 de sa forme: voici le mien, y compris jQuery et non-jQuery.
jQuery
Notez que jQuery normalise l’objet événement, 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 secours pour 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: consultez 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 informer 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 suit:
<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 touche Caps Lock est enfoncée (avec certaines limitations).
Il prend également en charge les lettres non anglaises situées en dehors de la plage AZ, car il compare le caractère de chaîne à toUpperCase() et toLowerCase() au lieu de vérifier 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’activation du verrouillage des majuscules n’est utile que si nous connaissons l’état du verrouillage des majuscules avant que la touche Caps Lock ne soit enfoncée. L'état de verrouillage majuscule actuel est conservé avec une propriété caps JavaScript 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 un 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 les clics de souris dans l’entrée et 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'est pas relâchée, ce qui est correct mais non 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");
}
}
Récemment, un 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 numéros. (Sur le clavier allemand standard, le verrouillage des majuscules a un effet sur les chiffres).
Vous pouvez vérifier la dernière version ici: jquery.capsChecker
Pour jQuery avec amorçage Twitter
Vérifiez les majuscules verrouillées pour les caractères suivants:
AZ majuscule ou '& # 196;', '& # 214;', '& # 220;', '!', '&'; ',' & # 167; ',' $ ','% ',' & & Amp; ',' / ',' (',') ',' = ',': ','; ',' * ',' ' '
minuscule aZ ou 0-9 ou '& # 228;', '& # 246;', '& # 252;', '.', ',', '+', ' # '
/* 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>");
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
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.
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 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.
Encore une autre version, claire et simple, gère les majuscules décalées et n'est pas contrainte à 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];
Modifier: Le sens de capsLockOn a été inversé, doh, corrigé.
Modifier n ° 2: Après quelques vérifications supplémentaires, 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 de 0 valent beaucoup de touches au clavier 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 ce code l’attend, 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 vus 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 le segment le plus laid et le plus spécial, et il est possible 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, cela en vaut la peine, OMI, 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;
}
}
}
Cette réponse basée sur jQuery posté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: la détection de CapsLock a échoué lorsque vous appuyez sur la touche Maj:
$('#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.
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>
Mottie's et Diego Vieira's réponse ci-dessus correspond à ce que nous avons utilisé et devrait être la réponse acceptée maintenant. Cependant, avant que je ne le remarque, 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;
}
}
Appelez-le ensuite dans un gestionnaire d'événements comme capsLockIsOnKeyDown.capsLockIsOnKeyDown (event)
Mais encore une fois, nous n’avons utilisé que les réponses de @Mottie s et @Diego Vieira
Dans le code ci-dessous, il sera montré l'alerte lorsque les majuscules seront verrouillées et qu'elles appuieront sur la touche Maj.
si nous retournons false; 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 ceci avec un code simple 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:)
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 le sais, mais cela peut être utile à quelqu'un d'autre.
alors voici ma solution la plus simple (avec les 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 n'aimais pas vraiment les solutions que j'ai trouvées. J'ai donc trouvé une solution et je vous la propose à tous. Pour moi, si le verrouillage des majuscules est activé si je tape des lettres, ce n’est pas important. 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;
}
});
Lorsque vous tapez, si caplock est activé, il peut convertir automatiquement le caractère actuel en minuscule. Ainsi, même si caplocks est activé, il ne se comportera pas comme sur la page en cours. Pour informer vos utilisateurs, vous pouvez afficher un texte indiquant que caplocks est activé mais que les entrées de formulaire sont converties.
Il existe une solution beaucoup plus simple pour détecter les majuscules:
function isCapsLockOn(event) {
var s = String.fromCharCode(event.which);
if (s.toUpperCase() === s && s.toLowerCase() !== s && !event.shiftKey) {
return true;
}
}
