¿Cómo saber si el bloqueo de mayúsculas está en el uso de JavaScript?
keyboard capslock (30)
¿Cómo saber si el bloqueo de mayúsculas está en el uso de JavaScript?
Sin embargo, una advertencia: lo busqué en Google y la mejor solución que pude encontrar fue adjuntar un evento de onkeypress a cada entrada, luego verificar cada vez que la letra presionada era mayúscula, y si lo era, luego verificar si también se mantenía presionada la tecla shift. Si no lo fue, entonces el bloqueo de mayúsculas debe estar activado. Esto se siente realmente sucio y solo ... desperdicio - ¿seguramente hay una mejor manera que esta?
response anterior de y es lo que terminamos usando y debería ser la respuesta aceptada ahora. Sin embargo, antes de que me diera cuenta, escribí esta pequeña función javascript que no se basa en códigos de caracteres ...
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;
}
}
Entonces capsLockIsOnKeyDown.capsLockIsOnKeyDown(event) en un controlador de eventos como capsLockIsOnKeyDown.capsLockIsOnKeyDown(event)
Pero una vez más, terminamos usando las respuestas de @Mottie s y @Diego Vieira
Aquí hay un plugin de jquery personalizado, que utiliza ji ui, compuesto por todas las buenas ideas de esta página y aprovecha el widget de información sobre herramientas. El mensaje de bloqueo de mayúsculas se aplica automáticamente en todos los cuadros de contraseña y no requiere cambios en su html actual.
Código personalizado para enchufar ...
(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);
Aplicar a todos los elementos de contraseña ...
$(function () {
$(":password").capsLockAlert();
});
Basado en la respuesta de @joshuahedlund ya que funcionó bien para mí.
Hice del código una función para poder reutilizarlo y lo vinculé al cuerpo en mi caso. Puede vincularse al campo de contraseña solo si lo prefiere.
<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>
En JQuery. Esto cubre el manejo de eventos en Firefox y buscará caracteres en mayúsculas y minúsculas inesperados. Esto presupone un elemento <input id="password" type="password" name="whatever"/> y un elemento separado con id '' capsLockWarning '' que tiene la advertencia que queremos mostrar (pero está oculto de lo contrario).
$(''#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();
}
});
En este código a continuación, se mostrará alerta cuando las mayúsculas estén bloqueadas y presionen la tecla con la tecla shift.
si devolvemos falso; entonces el char actual no se agregará a la página de texto.
$(''#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;
}
});
En jQuery,
$(''#example'').keypress(function(e) {
var s = String.fromCharCode( e.which );
if ( s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey ) {
alert(''caps is on'');
}
});
Evite el error, como la tecla de retroceso, se s.toLowerCase() !== s .
Escribí una biblioteca llamada capsLock que hace exactamente lo que quieres que haga.
Solo inclúyelo en sus páginas web:
<script src="https://rawgit.com/aaditmshah/capsLock/master/capsLock.js"></script>
Entonces utilízalo como sigue:
alert(capsLock.status);
capsLock.observe(function (status) {
alert(status);
});
Vea la demostración: http://jsfiddle.net/3EXMd/
El estado se actualiza cuando presiona la tecla Bloq Mayús. Solo usa la tecla Shift hack para determinar el estado correcto de la tecla Bloq Mayús. Inicialmente el estado es false . Así que ten cuidado.
Esta es una solución que, además de verificar el estado al escribir, también alterna el mensaje de advertencia cada vez que se presiona la tecla Bloq Mayús (con algunas limitaciones).
También admite letras que no están en inglés fuera del rango AZ, ya que verifica el carácter de la cadena con toUpperCase() y toLowerCase() lugar de toLowerCase() rango de caracteres.
$(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>
Tenga en cuenta que el cambio de bloqueo de mayúsculas solo es útil si conocemos el estado del bloqueo de mayúsculas antes de presionar la tecla Bloq Mayús. El estado actual de bloqueo de mayúsculas se mantiene con una propiedad de JavaScript de caps en el elemento de contraseña. Esto se establece la primera vez que tenemos una validación del estado de bloqueo de mayúsculas cuando el usuario presiona una letra que puede ser mayúscula o minúscula. Si la ventana pierde el foco, ya no podemos observar el bloqueo de mayúsculas, así que debemos restablecer a un estado desconocido.
Este código detecta el bloqueo de mayúsculas sin importar el caso o si se presiona la tecla de mayúsculas:
$(''#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'');
}
});
Las principales respuestas aquí no funcionaron para mí por un par de razones (código sin comentar con un enlace muerto y una solución incompleta). Así que pasé unas horas probando a todos y obteniendo lo mejor que pude: aquí está el mío, incluyendo jQuery y no jQuery.
jQuery
Tenga en cuenta que jQuery normaliza el objeto de evento por lo que faltan algunas comprobaciones. También lo he reducido a todos los campos de contraseña (ya que esa es la razón principal para necesitarlo) y agregué un mensaje de advertencia. Esto se ha probado en Chrome, Mozilla, Opera e IE6-8. Estable y atrapa todos los estados de bloqueo de mayúsculas EXCEPTO cuando se presionan números o espacios.
/* 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>");
Sin jQuery
Algunas de las otras soluciones sin jQuery carecían de fallas de IE. @Zappa lo parchó.
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: Consulte las soluciones de @Borgar, @Joe Liversedge y @Zappa, y el complemento desarrollado por @Pavel Azanov, que no he probado pero es una buena idea. Si alguien conoce una forma de expandir el alcance más allá de A-Za-z, elimínelo. Además, las versiones de jQuery de esta pregunta están cerradas como duplicadas, por eso es que estoy publicando ambas aquí.
Me ha parecido interesante ... Puedes intentarlo ...
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;
}
Para caracteres internacionales, se puede agregar una verificación adicional para las siguientes claves según sea necesario. Debe obtener el rango de código de clave para los caracteres que le interesan, puede ser mediante el uso de una matriz de mapeo de teclas que contendrá todas las claves de casos de uso válidas a las que se dirige ...
AZ mayúscula o ''Ä'', ''Ö'', ''Ü'', minúscula aZ o 0-9 o ''ä'', ''ö'', ''ü''
Las claves anteriores son solo una muestra de representación.
Muchas respuestas existentes verifican el bloqueo de mayúsculas cuando Shift no está presionado, pero no lo hará si presiona la tecla Mayús y la escribe en minúsculas, o lo comprobará pero no verificará si el bloqueo de mayúsculas está desactivado, o lo comprobará pero considerará las claves no alfa como ''off''. Aquí hay una solución jQuery adaptada que mostrará una advertencia si se presiona una tecla alfa con mayúsculas (shift o no shift), apagará la advertencia si se presiona una tecla alfa sin mayúsculas, pero no apagará ni activará la advertencia cuando Se presionan números u otras teclas.
$("#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)
});
Otra versión, clara y simple, maneja mayúsculas y mayúsculas cambiadas, y no está restringida a ascii, creo:
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];
Edición: El sentido de capsLockOn se invirtió, doh, arreglado.
Edición # 2: Después de ver esto un poco más, hice algunos cambios, un código un poco más detallado, por desgracia, pero maneja más acciones de manera apropiada.
El uso de e.charCode en lugar de e.keyCode y la comprobación de valores 0 omite muchas pulsaciones de teclas que no son de caracteres, sin codificar nada específico de un idioma o conjunto de caracteres determinado. A mi entender, es un poco menos compatible, por lo que los navegadores más antiguos, no convencionales o móviles pueden no comportarse como espera este código, pero vale la pena, para mi situación de todos modos.
La comparación con una lista de códigos de puntuación conocidos evita que se vean como falsos negativos, ya que no están afectados por el bloqueo de mayúsculas. Sin esto, el indicador de bloqueo de mayúsculas se oculta al escribir cualquiera de esos caracteres de puntuación. Al especificar un conjunto excluido, en lugar de uno incluido, debería ser más compatible con los caracteres extendidos. Este es el bit más feo, casi especial, y existe la posibilidad de que los idiomas no occidentales tengan códigos de puntuación y / o puntuación suficientemente diferentes como para ser un problema, pero nuevamente vale la pena la OMI, al menos para mi situación.
Podrías usar este script . Debería funcionar bien en Windows incluso si se presiona la tecla Mayús pero no funcionará en Mac OS si es así.
Prueba este sencillo código en fácil de entender
Este es el guion
<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>
Y el html
<input type="password" name="txtPassword" onkeypress="capLock(event)" />
<div id="divMayus" style="visibility:hidden">Caps Lock is on.</div>
Puede detectar el bloqueo de mayúsculas usando "mayúsculas y minúsculas sin pulsar Mayúsculas" usando una captura de pulsación de tecla en el documento. Pero es mejor que se asegure de que ningún otro controlador de pulsación de tecla haga estallar la burbuja de evento antes de que llegue al controlador en el 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'')
}
}
Puede capturar el evento durante la fase de captura en los navegadores que lo admiten, pero parece algo inútil, ya que no funcionará en todos los navegadores.
No puedo pensar en ninguna otra forma de detectar realmente el estado de bloqueo de mayúsculas. La verificación es simple de todos modos y si se escribieron caracteres no detectables, bueno ... entonces la detección no fue necesaria.
Hubo un artículo sobre 24 maneras en este último año. Bastante bien, pero carece de soporte de caracteres internacionales (use toUpperCase() para evitar eso).
Puede usar un KeyboardEvent para detectar numerosas claves, incluido el bloqueo de mayúsculas en los navegadores más recientes.
La función getModifierState proporcionará el estado para:
- Alt
- AltGraph
- Bloq Mayús
- Controlar
- Fn (Android)
- Meta
- Num lock
- OS (Windows y Linux)
- ScrollLock
- Cambio
Esta demostración funciona en todos los principales navegadores, incluido el móvil ( caniuse ).
document.addEventListener( ''keydown'', function( event ) {
var caps = event.getModifierState && event.getModifierState( ''CapsLock'' );
console.log( caps ); // true when you press the keyboard CapsLock key
});
Recientemente hubo una pregunta similar en hashcode.com, y creé un plugin jQuery para resolverlo. También es compatible con el reconocimiento de mayúsculas en los números. (En el teclado alemán estándar, el bloqueo de mayúsculas tiene efecto en los números).
Puedes consultar la última versión aquí: jquery.capsChecker
Sé que este es un tema antiguo, pero pensé que me retroalimentaría en caso de que ayude a otros. Ninguna de las respuestas a la pregunta parece funcionar en IE8. Sin embargo, encontré este código que funciona en IE8. (Aún no se ha probado nada por debajo de IE8). Esto se puede modificar fácilmente para jQuery si es necesario.
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'';
}
Y la función se llama a través del evento onkeypress como este:
<input type="password" name="txtPassword" onkeypress="capsCheck(event,this);" />
<div id="capsWarningDiv" style="visibility:hidden">Caps Lock is on.</div>
Trate de usar este código.
$(''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
});
Buena suerte :)
Una variable que muestra el estado de bloqueo de mayúsculas:
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;
});
funciona en todos los navegadores => caniuse
Usamos getModifierState para verificar el bloqueo de mayúsculas, es solo un miembro de un evento de mouse o teclado, por lo que no podemos usar un onfocus . Las dos formas más comunes en que el campo de la contraseña ganará enfoque son con un clic o una pestaña. Usamos onclick para buscar un clic del mouse dentro de la entrada, y usamos onkeyup para detectar una pestaña del campo de entrada anterior. Si el campo de contraseña es el único campo en la página y se enfoca automáticamente, el evento no ocurrirá hasta que se libere la primera tecla, lo cual está bien pero no es lo ideal, realmente desea que las sugerencias de herramientas de bloqueo de mayúsculas se muestren una vez que el campo de la contraseña gana enfoque, pero para la mayoría de los casos esta solución funciona como un encanto.
HTML
<input type="password" id="password" onclick="checkCapsLock(event)" onkeyup="checkCapsLock(event)" />
JS
function checkCapsLock(e) {
if (e.getModifierState("CapsLock")) {
console.log("Caps");
}
}
Código 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>
Ahora necesitamos asociar este script usando Html.
<input type="password" name="txtPassword" onkeypress="isCapLockOn(event)" />
<div id="alert" style="visibility:hidden">Caps Lock is on.</div>
Para jQuery con twitter bootstrap
Verifique las mayúsculas bloqueadas para los siguientes caracteres:
mayúscula AZ o ''Ä'', ''Ö'', ''Ü'', ''!'', ''"'', ''§'', ''$'', ''%'', ''&'', ''/'', ''('', '')'' , ''='', '':'', '';'', ''*'', '''' ''
minúscula aZ o 0-9 o ''ä'', ''ö'', ''ü'', ''.'', '','', ''+'', ''#''
/* 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>");
Reaccionar
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;
}
}
}
Es tarde, lo sé, pero esto puede ser útil a alguien más.
así que aquí está mi solución más simple (con caracteres turcos);
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 = '''';
}
}
Esta respuesta basada en jQuery publicada por @ user110902 fue útil para mí. Sin embargo, lo mejoré un poco para evitar una falla mencionada en el comentario de @B_N: no se pudo detectar CapsLock mientras presionas 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'');
}
});
Así, funcionará incluso mientras se presiona Shift.
Hay una solución mucho más simple para detectar el bloqueo de mayúsculas:
function isCapsLockOn(event) {
var s = String.fromCharCode(event.which);
if (s.toUpperCase() === s && s.toLowerCase() !== s && !event.shiftKey) {
return true;
}
}
Así que encontré esta página y no me gustaron las soluciones que encontré, así que resolví una y se la ofrezco a todos. Para mí, solo importa si las mayúsculas están activadas si estoy escribiendo letras. Este código solucionó el problema para mí. Es rápido y fácil, y le brinda una variable de referencia de mayúsculas para hacer referencia cuando la necesite.
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;
}
});
Cuando escribe, si caplock está activado, podría convertir automáticamente el char actual a minúsculas. De esa manera, incluso si los caplocks están activados, no se comportará como si estuviera en la página actual. Para informar a sus usuarios, puede mostrar un texto que diga que los bloqueos de tiempo están activados, pero que las entradas del formulario se convierten.