Come fai a sapere se il blocco maiuscole è attivo utilizzando JavaScript?
https://stackoverflow.com/questions/348792
-
20-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Come fai a sapere se il blocco maiuscole è attivo utilizzando JavaScript?
Un avvertimento però:L'ho cercato su Google e la soluzione migliore che ho trovato è stata allegare un file onkeypress evento ad ogni input, quindi controlla ogni volta se la lettera premuta era maiuscola e, se lo era, controlla se è stato tenuto premuto anche Shift.Se non lo fosse, allora il blocco maiuscole deve essere attivo.Sembra davvero sporco e semplicemente... dispendioso - sicuramente c'è un modo migliore di questo?
Soluzione
Ho trovato questo interessante .... Puoi provarlo ..
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;
}
Per i caratteri internazionali, è possibile aggiungere un controllo aggiuntivo per le seguenti chiavi, se necessario. Devi ottenere l'intervallo di codici chiave per i caratteri che ti interessano, ad esempio utilizzando un array di keymapping che conterrà tutte le chiavi valide del caso d'uso che stai indirizzando ...
A-Z maiuscola o '& # 196;', '& # 214;', '& # 220;', a-Z minuscola o 0-9 o '& # 228;', '& # 246;', '& # 252;'
Le chiavi sopra sono solo una rappresentazione di esempio.
Altri suggerimenti
In jQuery,
$('#example').keypress(function(e) {
var s = String.fromCharCode( e.which );
if ( s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey ) {
alert('caps is on');
}
});
Evita l'errore, come il tasto backspace, è necessario s.toLowerCase() !== s.
Puoi usare a KeyboardEvent per rilevare numerosi tasti compreso il blocco maiuscole sui browser più recenti.
IL getModifierState funzione fornirà allo Stato:
- Alt
- AltGraph
- Blocco maiuscole
- Controllo
- Fn (Android)
- Meta
- Bloc Num
- Sistema operativo (Windows e Linux)
- Blocco scorrimento
- Spostare
Questa dimostrazione funziona con tutti i principali browser, inclusi quelli mobili (posso usare).
passwordField.addEventListener( 'keydown', function( event ) {
var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
console.log( caps ); // true when you press the keyboard CapsLock key
});
È possibile rilevare il blocco maiuscole usando " è la lettera maiuscola e non viene premuto maiusc " usando un'acquisizione del tasto premuto sul documento. Ma allora è meglio essere sicuri che nessun altro gestore di pressione dei tasti salti la bolla dell'evento prima che arrivi al gestore del documento.
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')
}
}
Potresti prendere l'evento durante la fase di acquisizione nei browser che lo supportano, ma sembra in qualche modo inutile in quanto non funzionerà su tutti i browser.
Non riesco a pensare a nessun altro modo di rilevare effettivamente lo stato di blocco maiuscole. Il controllo è comunque semplice e se sono stati digitati caratteri non rilevabili, beh ... allora non era necessario rilevare.
In questo ultimo anno è stato un articolo su 24 vie . Abbastanza buono, ma manca il supporto per i personaggi internazionali (usa toUpperCase() per aggirare il problema).
Molte risposte esistenti verificheranno il blocco maiuscole quando non viene premuto il tasto MAIUSC, ma non lo controlleranno se si preme MAIUSC e si diventa minuscole, o lo verificheranno, ma non si verificherà anche la disattivazione del blocco maiuscole o si verificherà per questo, ma considererà le chiavi non alfa come 'off'. Ecco una soluzione jQuery adattata che mostrerà un avviso se un tasto alfa viene premuto con maiuscole (maiusc o no shift), disattiverà l'avviso se un tasto alfa viene premuto senza maiuscole, ma non spegnerà o accenderà l'avviso quando vengono premuti numeri o altri tasti.
$("#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)
});
In JQuery. Questo riguarda la gestione degli eventi in Firefox e verificherà la presenza di caratteri maiuscoli e minuscoli inattesi. Ciò presuppone un <input id="password" type="password" name="whatever"/> elemento e un elemento separato con ID 'capsLockWarning' che ha l'avvertimento che vogliamo mostrare (ma è nascosto altrimenti).
$('#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();
}
});
Le risposte migliori qui non hanno funzionato per me per un paio di ragioni (codice non commentato con un link non funzionante e una soluzione incompleta). Quindi ho trascorso alcune ore a provare tutti fuori e ottenere il meglio che potevo: ecco il mio, tra cui jQuery e non jQuery.
jQuery
Nota che jQuery normalizza l'oggetto evento in modo che manchino alcuni controlli. L'ho anche ristretto a tutti i campi password (poiché questo è il motivo principale per cui è necessario) e ho aggiunto un messaggio di avviso. Questo è stato testato in Chrome, Mozilla, Opera e IE6-8. Stabile e intercetta tutti gli stati capslock TRANNE quando vengono premuti numeri o spazi.
/* 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>");
Senza jQuery
Alcune delle altre soluzioni senza jQuery mancavano di fallback di IE. @Zappa l'ha corretto.
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
}
}
Nota: controlla le soluzioni di @Borgar, @Joe Liversedge e @Zappa e il plugin sviluppato da @Pavel Azanov, che non ho provato ma è una buona idea. Se qualcuno conosce un modo per espandere l'ambito oltre A-Za-z, modifica via. Inoltre, le versioni jQuery di questa domanda sono chiuse come duplicate, quindi è per questo che sto postando entrambe qui.
So che questo è un vecchio argomento, ma ho pensato che avrei reagito nel caso aiutasse gli altri. Nessuna delle risposte alla domanda sembra funzionare in IE8. Tuttavia, ho trovato questo codice che funziona in IE8. (Non ho ancora testato nulla al di sotto di IE8). Questo può essere facilmente modificato per jQuery, se necessario.
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';
}
E la funzione viene chiamata attraverso l'evento onkeypress in questo modo:
<input type="password" name="txtPassword" onkeypress="capsCheck(event,this);" />
<div id="capsWarningDiv" style="visibility:hidden">Caps Lock is on.</div>
Questa è una soluzione che, oltre a controllare lo stato durante la scrittura, attiva e disattiva il messaggio di avviso ogni volta che si preme il tasto Blocco maiuscole (con alcune limitazioni).
Supporta anche lettere non inglesi al di fuori dell'intervallo A-Z, in quanto controlla il carattere di stringa rispetto a toUpperCase() e toLowerCase() invece di verificare rispetto all'intervallo di caratteri.
$(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>
Notare che osservare l'attivazione / disattivazione del blocco maiuscole è utile solo se si conosce lo stato del blocco maiuscole prima che venga premuto il tasto Blocco maiuscole . Lo stato di blocco maiuscole corrente viene mantenuto con una proprietà caps JavaScript sull'elemento password. Viene impostato la prima volta che viene convalidata la condizione di blocco maiuscole quando l'utente preme una lettera che può essere maiuscola o minuscola. Se la finestra perde lo stato attivo, non possiamo più osservare l'attivazione / disattivazione del blocco maiuscole, quindi è necessario ripristinare uno stato sconosciuto.
Usiamo getModifierState per verificare la presenza di maiuscole, è solo un membro di un evento mouse o tastiera, quindi non possiamo usare un onfocus. I due modi più comuni in cui il campo della password si focalizzeranno è con un clic in o una scheda. Usiamo onclick per verificare la presenza di un clic del mouse all'interno dell'input e utilizziamo onkeyup per rilevare una scheda dal campo di input precedente. Se il campo password è l'unico campo della pagina ed è auto-focalizzato, l'evento non si verificherà fino a quando non viene rilasciato il primo tasto, il che è ok ma non è l'ideale, vuoi davvero che vengano visualizzati i suggerimenti dello strumento Blocco maiuscole una volta che il campo password ha guadagnato attenzione, ma nella maggior parte dei casi questa soluzione funziona come un fascino.
HTML
<input type="password" id="password" onclick="checkCapsLock(event)" onkeyup="checkCapsLock(event)" />
JS
function checkCapsLock(e) {
if (e.getModifierState("CapsLock")) {
console.log("Caps");
}
}
Di recente si è verificato un domanda simile su hashcode.com e ho creato un plug-in jQuery per gestirlo. Supporta anche il riconoscimento del blocco maiuscole sui numeri. (Sul layout di tastiera tedesco standard il blocco maiuscole ha effetto sui numeri).
Puoi controllare l'ultima versione qui: jquery.capsChecker
Per jQuery con Twitter Bootstrap
Controlla i tappi bloccati per i seguenti caratteri:
AZ maiuscola o '& # 196;', '& # 214;', '& # 220;', '!', '"', '& # 167; ',' $ ','% ',' & Amp; ',' / ',' (',') ',' = ',': ','; ',' * ',' ' '
aZ minuscola o 0-9 o '& # 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>");
Una variabile che mostra lo stato di blocco maiuscole:
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;
});
funziona su tutti i browser = > canIUse
Questo codice rileva il blocco maiuscole, indipendentemente dal caso o se viene premuto il tasto Maiusc:
$('#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');
}
});
Ho scritto una libreria chiamata capsLock che fa esattamente quello che vuoi che faccia.
Includilo nelle tue pagine web:
<script src="https://rawgit.com/aaditmshah/capsLock/master/capsLock.js"></script>
Quindi utilizzalo come segue:
alert(capsLock.status);
capsLock.observe(function (status) {
alert(status);
});
Guarda la demo: http://jsfiddle.net/3EXMd/
Lo stato viene aggiornato quando si preme il tasto BLOC MAIUSC. Utilizza solo l'hack del tasto Maiusc per determinare lo stato corretto del tasto BLOC MAIUSC. Inizialmente lo stato è false. Quindi attenzione.
Ancora un'altra versione, chiara e semplice, gestisce maiusc MAIUSC spostato e non vincolato ad ASCII penso:
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];
Modifica: Il senso di capsLockOn è stato invertito, doh, corretto.
Modifica n. 2: dopo aver verificato questo un po 'di più, ho apportato alcune modifiche, un po' di codice un po 'più dettagliato, ma gestisce più azioni in modo appropriato.
-
L'uso di e.charCode invece di e.keyCode e il controllo di 0 valori salta molti tasti senza caratteri, senza codificare nulla di specifico per una determinata lingua o set di caratteri. Da quanto ho capito, è leggermente meno compatibile, quindi i browser più vecchi, non tradizionali o mobili potrebbero non comportarsi come previsto da questo codice, ma ne vale la pena, comunque per la mia situazione.
-
Il confronto con un elenco di codici di punteggiatura noti impedisce loro di essere visti come falsi negativi, poiché non sono interessati dal blocco maiuscole. Senza questo, l'indicatore di blocco maiuscole viene nascosto quando si digita uno di quei caratteri di punteggiatura. Specificando un set escluso, anziché uno incluso, dovrebbe essere più compatibile con i caratteri estesi. Questa è la parte più brutta, in casi speciali, e c'è qualche possibilità che le lingue non occidentali abbiano punteggiatura e / o codici di punteggiatura abbastanza diversi da essere un problema, ma ancora una volta vale la pena IMO, almeno per la mia situazione.
Reagire
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;
}
}
}
Questa risposta basata su jQuery pubblicata da @ user110902 mi è stata utile. Tuttavia, l'ho migliorato un po 'per evitare un difetto menzionato nel commento di @B_N: non è riuscito a rilevare CapsLock mentre si preme Maiusc:
$('#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');
}
});
In questo modo, funzionerà anche premendo Shift.
Basato sulla risposta di @joshuahedlund poiché ha funzionato bene per me.
Ho reso il codice una funzione in modo che possa essere riutilizzato e nel mio caso l'ho collegato al corpo. Può essere collegato al campo password solo se si preferisce.
<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 e Diego Vieira's response sopra è quello che abbiamo finito per usare e dovrebbe essere la risposta accettata ora. Tuttavia, prima che me ne accorgessi, ho scritto questa piccola funzione javascript che non si basa sui codici carattere ...
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;
}
}
Quindi chiamalo in un gestore eventi in questo modo capsLockIsOnKeyDown.capsLockIsOnKeyDown(event)
Ma ancora una volta abbiamo finito per usare la risposta di @Mottie e @Diego Vieira
In questo codice riportato di seguito verrà mostrato un avviso quando si bloccano le maiuscole e premono il tasto usando Maiusc.
se restituiamo false; quindi il carattere corrente non verrà aggiunto alla pagina di testo.
$('#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;
}
});
prova questo semplice codice in facile da capire
Questo è lo 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>
E l'Html
<input type="password" name="txtPassword" onkeypress="capLock(event)" />
<div id="divMayus" style="visibility:hidden">Caps Lock is on.</div>
prova a usare questo codice.
$('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
});
Buona fortuna :)
Codice 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>
Ora dobbiamo associare questo script tramite HTML
<input type="password" name="txtPassword" onkeypress="isCapLockOn(event)" />
<div id="alert" style="visibility:hidden">Caps Lock is on.</div>
è tardi, lo so, ma questo può essere d'aiuto a qualcun altro.
quindi ecco la mia soluzione più semplice (con caratteri turchi);
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 = '';
}
}
Quindi ho trovato questa pagina e non mi sono piaciute molto le soluzioni che ho trovato, quindi ne ho capito uno e lo sto offrendo a tutti voi. Per me, importa solo se il blocco maiuscole è attivo se sto scrivendo lettere. Questo codice ha risolto il problema per me. È semplice e veloce e ti offre una variabile capsIsOn da consultare ogni volta che ne hai bisogno.
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;
}
});
Quando digiti, se il Caplock è attivato, potrebbe convertire automaticamente il carattere corrente in minuscolo. In questo modo, anche se i Caplocks sono attivi, non si comporterà come nella pagina corrente. Per informare i tuoi utenti potresti visualizzare un testo che dice che i blocchi sono attivati, ma che le voci del modulo vengono convertite.
Esiste una soluzione molto più semplice per rilevare il maiuscolo:
function isCapsLockOn(event) {
var s = String.fromCharCode(event.which);
if (s.toUpperCase() === s && s.toLowerCase() !== s && !event.shiftKey) {
return true;
}
}
