¿Cómo saber si el bloqueo de mayúsculas está activado usando JavaScript?


242

¿Cómo saber si el bloqueo de mayúsculas está activado usando JavaScript?

Sin embargo, una advertencia: lo busqué en Google y la mejor solución que pude encontrar fue adjuntar un onkeypressevento a cada entrada, luego verificar cada vez si la letra presionada era mayúscula, y si era así, verifique si también se mantuvo presionada la tecla shift. De lo contrario, el bloqueo de mayúsculas debe estar activado. Esto se siente realmente sucio y simplemente ... derrochador , ¿seguramente hay una mejor manera que esta?


198
PORQUE DEMASIADO MUCHOS DE MIS USUARIOS LLENAN SUS FORMULARIOS COMO ESTO.
nickf

77
@nicf: Si esa es la razón, ¿por qué no ejecuta una expresión regular en la entrada y les pide que dejen de gritar si hay demasiadas letras mayúsculas?
Algunos

155
Hay una razón mucho mejor para hacer esto. Si un usuario ingresa una contraseña, sería muy útil advertirle si su bloqueo de mayúsculas está activado.
T Nguyen

23
Parece que los navegadores deben implementar una advertencia de "bloqueo de mayúsculas activado" cuando los usuarios input type=passwordinput type=email
escriben

8
Excelente pregunta, pero la respuesta aceptada tiene 8 años. La mejor respuesta está aquí
Mac

Respuestas:


95

Puede intentarlo. Se agregó un ejemplo de trabajo. Cuando el foco está en la entrada, activar el bloqueo de mayúsculas hace que el led se vuelva rojo, de lo contrario, verde. (No lo he probado en mac / linux)

NOTA: Ambas versiones están funcionando para mí. Gracias por aportes constructivos en los comentarios.

VERSIÓN ANTIGUA: https://jsbin.com/mahenes/edit?js,output

Además, aquí hay una versión modificada (¿alguien puede probar en Mac y confirmar)

NUEVA VERSIÓN: https://jsbin.com/xiconuv/edit?js,output

NUEVA VERSIÓN:

function isCapslock(e){
    const IS_MAC = /Mac/.test(navigator.platform);

    const charCode      = e.charCode;
    const shiftKey      = e.shiftKey;

    if (charCode >= 97 && charCode <= 122){
      capsLock = shiftKey;
    } else if (charCode >= 65 && charCode <= 90 
               && !(shiftKey && IS_MAC)){
      capsLock = !shiftKey;
    }

    return capsLock;
}

VERSIÓN ANTIGUA:

la función esCapslock (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 teclas según sea necesario. Debe obtener el rango de códigos de tecla para los caracteres que le interesan, puede ser mediante el uso de una matriz de asignación de teclas que contendrá todas las teclas de caso de uso válidas que está abordando ...

AZ mayúscula o 'Ä', 'Ö', 'Ü', aZ minúscula o 0-9 o 'ä', 'ö', 'ü'

Las teclas anteriores son solo representaciones de muestra.


1
Posiblemente no sea la mejor implementación, pero cuando lo escribí estaba tratando de mantenerlo simple. Creo que la única forma en que realmente puedes hacerlo es con la desagradable necesidad de cubrir diferentes navegadores.

2
Descubrí que usar esto con keydown (en cromo) hace que todos los códigos se recojan como mayúsculas. Si uso keypress funciona.
Tim

2
Encontrar cada combinación de caracteres posible para todos los personajes internacionales está condenado a perder algunos casos. Utilice en su lugar métodos de mayúsculas / minúsculas para verificar la carcasa.
asombro

3
Sorprendentemente, una respuesta completamente falsa, códigos de barras confusos y ascii (!!!), puede obtener tanto voto positivo. ¿Nadie ha comprobado nunca?
GameAlchemist el

1
Tenga en cuenta que según Mozilla , event.que se ha eliminado de los estándares web.
verismo

130

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, s.toLowerCase() !== ses necesario.


55
en realidad ... fromCharCode eliminó la necesidad de que incluso lo verificara. Sin embargo, debe tenerse en cuenta que la pulsación de teclas y la pulsación de teclas dan diferentes códigos de barras, que fue donde me equivoqué en primer lugar.
Shea

44
-1 aC esto SOLO funciona si no han presionado shift mientras CAPS está activado.

1
Si alguien quiere ver un ejemplo en vivo con bootstrap, puede verlo aquí bootply.com/91792
Govinda Rajbhar

Esta respuesta fue útil para mí. Mejoré el condicional en esta respuesta , debido a la falla mencionada por @D_N, de que no funciona mientras presiono shift.
SebasSBM

105

Puede usar a KeyboardEventpara detectar numerosas teclas, incluido el bloqueo de mayúsculas en los navegadores más recientes.

La getModifierStatefunción proporcionará el estado para:

  • Alt
  • AltGraph
  • Bloq Mayús
  • Controlar
  • Fn (Android)
  • Meta
  • Num lock
  • SO (Windows y Linux)
  • ScrollLock
  • Cambio

Esta demostración funciona en todos los principales navegadores, incluido el móvil ( caniuse )

passwordField.addEventListener( 'keydown', function( event ) {
  var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
  console.log( caps ); // true when you press the keyboard CapsLock key
});

66
Respondí esto en una pregunta dupe / similar y fui actualizado por otro usuario que ahora tiene soporte para Chrome. Confirmé esto, por lo que ahora funciona en todos los principales navegadores, y debería ser la mejor solución a esta pregunta
Ian Clark

caniuse.com/#search=getModifierState dice que actualmente no es compatible con Safari (¿todavía?). Por lo tanto, en todos los principales navegadores puede que aún no sea el caso.
Jens Kooij

2
Es compatible con Safari ahora.
Mottie

1
Y sin embargo, detecta la presión de mayúsculas y no puede obtener el estado general de mayúsculas cuando el usuario ingresa al formulario ...
SparK

Esto parece funcionar excepto cuando se presiona la tecla de bloqueo de mayúsculas en la posición de apagado . No recoge esa entrada hasta que presiona la siguiente tecla. Esto estaba en Chrome para OS X. No estoy seguro si esto es algo que se extiende a través de navegadores y sistemas operativos.
Ashraf Slamang

24

Puede detectar el bloqueo de mayúsculas usando "es letra mayúscula y no se presiona ningún turno" 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 muestre la burbuja de eventos 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 tomar 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 se me ocurre otra forma de detectar 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 era necesaria.

Hubo un artículo sobre 24 maneras en este último año. Bastante bueno, pero carece de soporte de carácter internacional (se usa toUpperCase()para evitar eso).


Esto es realmente lo que estaba buscando. Esto funciona con cuerdas latinas y cirílicas. ¡Gracias!
Mladen Janjetovic

Esto funciona bien, pero las teclas como ESPACIO y números indican la advertencia. ¿Conoces una solución (igualmente concisa / elegante)?

1
Además, es bueno que note la incompletitud, pero todavía está incompleta. No estoy seguro de cómo solucionarlo con este método.

11

Muchas respuestas existentes verifican el bloqueo de mayúsculas cuando no se presiona shift pero no lo verifican si presiona shift y se pone en minúsculas, o lo verificará pero no verificará también si el bloqueo de mayúsculas está desactivado, o lo verificará pero considerará las claves no alfa como 'desactivadas'. Aquí hay una solución adaptada de jQuery 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 la apagará o encenderá 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)
  });

11

En JQuery Esto cubre el manejo de eventos en Firefox y verificará los caracteres inesperados en mayúsculas y minúsculas. Esto presupone un <input id="password" type="password" name="whatever"/>elemento 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();
    }
});

No estoy seguro de por qué, pero este método no funciona en la primera pulsación de tecla (probado solo en Chrome).

¿Podría ser el problema de ocultar el campo vacío? No pude lograr que funcione correctamente, al menos en Chrome. Sucede automáticamente en muchos otros navegadores (al menos en mi versión, a continuación) porque los espacios de retroceso cuentan y dejan en blanco el mssg.

Nota : como utilizó correctamente aquí, debe usar el keypressevento para hacer uso de diferentes casquillos en la entrada, porque ambos keydowny keyupsiempre devolverán mayúsculas . En consecuencia, esto no va a disparar la tecla BloqMayus ... si tuvo la intención de combinar cone.originalEvent.getModifierState('CapsLock')
KyleMit

6

Las mejores respuestas aquí no funcionaron para mí por un par de razones (código no comentado con un enlace inactivo y una solución incompleta). Así que pasé unas horas probando a todos y obteniendo lo mejor que pude: aquí está el mío, incluidos jQuery y no jQuery.

jQuery

Tenga en cuenta que jQuery normaliza el objeto de evento, por lo que faltan algunas comprobaciones. También lo reduje a todos los campos de contraseña (ya que esa es la razón más importante para necesitarlo) y agregué un mensaje de advertencia. Esto ha sido probado en Chrome, Mozilla, Opera e IE6-8. Estable y captura todos los estados 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 fallos 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: Echa un vistazo a 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 manera de expandir el alcance más allá de A-Za-z, edítelo. Además, las versiones jQuery de esta pregunta están cerradas como duplicadas, por eso publico ambas aquí.


44
Una buena solución siempre debe incluir soporte para letras fuera de las letras inglesas AZ. Cualquier otra solución es un insulto a casi todos los idiomas que no son inglés.
temor

6

Usamos getModifierStatepara verificar el bloqueo de mayúsculas, solo es 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 contraseña se enfocará es con un clic o una pestaña. Usamos onclickpara verificar si hay un clic del mouse dentro de la entrada, y usamos onkeyuppara detectar una pestaña del campo de entrada anterior. Si el campo de contraseña es el único campo en la página y está autoenfocado, entonces el evento no ocurrirá hasta que se suelte la primera tecla, lo cual está bien pero no es ideal, realmente desea que se muestren las sugerencias de herramientas de bloqueo de mayúsculas una vez que el campo de contraseña gana enfoque, pero para la mayoría de los casos esta solución funciona de maravilla.

HTML

<input type="password" id="password" onclick="checkCapsLock(event)" onkeyup="checkCapsLock(event)" />

JS

function checkCapsLock(e) {
  if (e.getModifierState("CapsLock")) {
    console.log("Caps");
  }
}

https://codepen.io/anon/pen/KxJwjq


¡Magnífico! Simple, conciso e impecable en mi implementación.
Sirtastic

1
@ Ryan: ¡Gracias por la contribución! Es un buen y limpio ejemplo de código, aunque me gustaría señalar que su respuesta es básicamente la misma que la respuesta de Mottie de 2015, donde ambos empleanevent.getModifierState("CapsLock").
Mac

5

Sé que este es un tema antiguo, pero pensé en retroalimentarme 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. (Todavía no he 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> 

Gracias por la solución de IE8. Lo incorporé en mi respuesta reelaborada (a continuación). Sin embargo, esto es sólido.

5

Esta es una solución que, además de verificar el estado al escribir, también alterna el mensaje de advertencia cada vez que Caps Lockse presiona la tecla (con algunas limitaciones).

También admite letras que no están en inglés fuera del rango AZ, ya que comprueba el carácter de la cadena toUpperCase()y, en toLowerCase()lugar de hacerlo, compara el 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 observar la alternancia de bloqueo de mayúsculas solo es útil si conocemos el estado del bloqueo de mayúsculas antes de Caps Lockpresionar la tecla. El estado actual de bloqueo de mayúsculas se mantiene con una capspropiedad de JavaScript 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 alternar el bloqueo de mayúsculas, por lo que debemos restablecer a un estado desconocido.


2
Buena idea. Si va a mostrar una advertencia al usuario de que el bloqueo de mayúsculas está activado, probablemente sea una buena idea desactivar esa advertencia inmediatamente cuando el bloqueo de mayúsculas está desactivado, de lo contrario podría confundir al usuario.
Ajedi32

3

Recientemente hubo una pregunta similar en hashcode.com, y creé un complemento jQuery para tratarlo. También es compatible con el reconocimiento de mayúsculas en los números. (En el diseño de teclado alemán estándar, el bloqueo de mayúsculas tiene efecto en los números).

Puede consultar la última versión aquí: jquery.capsChecker


3

Para jQuery con bootstrap de twitter

Verifique las mayúsculas bloqueadas para los siguientes caracteres:

AZ mayúscula o 'Ä', 'Ö', 'Ü', '!', '"', '§', '$', '%', '&', '/', '(', ')' , '=', ':', ';', '*', '' '

minúsculas 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>");

demostración en vivo en jsfiddle


3

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


1
Votado por dar una respuesta actualizada a una vieja pregunta. Es posible que desee agregar algo como un título que diga algo como "Para los navegadores modernos (2017->) intente esto" o "Actualización para 2017"
eon

3

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 detectó CapsLock mientras presiona 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');
    }
});

De esta manera, funcionará incluso mientras presiona Shift.


2

Este código detecta el bloqueo de mayúsculas sin importar el caso o si se presiona la tecla Mayús:

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

Esto hace que el espacio y la retroceso se detecten como mayúsculas en Firefox.
Adrian Rosca

2

Escribí una biblioteca llamada capsLock que hace exactamente lo que quieres que haga.

Solo inclúyalo en sus páginas web:

<script src="https://rawgit.com/aaditmshah/capsLock/master/capsLock.js"></script>

Luego úselo de la siguiente manera:

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 el hack de la tecla Shift 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 realmente ingeniosa. Pero tiene el error de que si el Bloqueo de mayúsculas está activado cuando la página se enfoca, el objeto "bloqueo de mayúsculas" comienza con el estado incorrecto (desactivado).
Ric

De hecho, comienza con un estado incorrecto. Sin embargo, cuando presiona cualquier tecla, corrige automáticamente su estado. Si puede encontrar una manera de establecerlo en el estado correcto cuando la página se enfoca, estaría encantado de fusionar su código.
Aadit M Shah

2

Sin embargo, otra versión, clara y simple, maneja mayúsculas mayúsculas y no se limita 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];

Editar: El sentido de capsLockOn fue invertido, doh, corregido

Edición n. ° 2: después de revisar esto un poco más, he realizado algunos cambios, un código un poco más detallado por desgracia, pero maneja más acciones de manera adecuada.

  • El uso de e.charCode en lugar de e.keyCode y la comprobación de los valores 0 omite muchas pulsaciones de teclas sin caracteres, sin codificar nada específico para un idioma o conjunto de caracteres dado. Según tengo entendido, es un poco menos compatible, por lo que los navegadores más antiguos, no convencionales o móviles pueden no comportarse como este código espera, pero de todos modos vale la pena, para mi situación.

  • Verificar una lista de códigos de puntuación conocidos evita que sean vistos como falsos negativos, ya que no se ven afectados por el bloqueo de mayúsculas. Sin esto, el indicador de bloqueo de mayúsculas se oculta cuando escribe 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 y especial, y hay alguna posibilidad de que los idiomas no occidentales tengan diferentes signos de puntuación y / o códigos de puntuación como para ser un problema, pero nuevamente vale la pena en mi opinión, al menos para mi situación.


2

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

1

Basado en la respuesta de @joshuahedlund ya que funcionó bien para mí.

Hice que el código fuera 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>

1

La respuesta anterior de Mottie y Diego Vieira es lo que terminamos usando y debería ser la respuesta aceptada ahora. Sin embargo, antes de darme cuenta, escribí esta pequeña función de 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;
  }
}

Luego llámalo en un controlador de eventos así capsLockIsOnKeyDown.capsLockIsOnKeyDown(event)

Pero nuevamente, terminamos usando la respuesta de @Mottie sy @Diego Vieira


0

En este código a continuación, se mostrará alerta cuando las mayúsculas se bloqueen y presionen la tecla usando 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;
    }
});

Solo funciona si el bloqueo de mayúsculas está activado. Si el bloqueo de mayúsculas está desactivado, aún informa que el bloqueo de mayúsculas está activado pero con la tecla Mayús presionada (ambas con la tecla Mayús presionada o no).
temor

Ok, lo siento @awe
Naga Harish M

0

prueba este código simple en fácil de entender

Este es el guión

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

0

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


0

Podrías usar este script . Debería funcionar bien en Windows incluso si se presiona la tecla Shift, pero no funcionará en Mac OS si es así.


0

Aquí hay un complemento jquery personalizado, que usa jquery 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 a todos los cuadros de contraseña y no requiere cambios en su html actual.

Código de enchufe personalizado ...

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

0

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> 

0

es tarde, lo sé, pero esto puede ser útil para otra persona.

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

0

Así que encontré esta página y realmente no me gustaron las soluciones que encontré, así que descubrí una y la estoy ofreciendo a todos ustedes. Para mí, solo importa si el bloqueo de mayúsculas está activado si estoy escribiendo letras. Este código resolvió el problema para mí. Es rápido y fácil y le ofrece una variable capsIsOn para consultar siempre que 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;
  }
});


-1

Cuando escribe, si Caplock está activado, podría convertir automáticamente el carácter actual en minúsculas. De esa manera, incluso si los bloqueos están activados, no se comportará como en la página actual. Para informar a sus usuarios, puede mostrar un texto que indique que los bloqueos están activados, pero que las entradas del formulario se convierten.


Sí, pero aún necesitarías detectar el bloqueo de mayúsculas. Además, esto significa que no permite mayúsculas en las contraseñas, lo cual es subóptimo.
Dave Liepmann

para detectar si el bloqueo de mayúsculas está activado, debe verificar si la versión en minúsculas del carácter que envió es diferente, si es -> bloqueo de mayúsculas, entonces «Advertencia: está utilizando el bloqueo de mayúsculas pero nuestro sistema está convirtiendo minúscula », supongo que javascript no está destinado a detectar el bloqueo de mayúsculas después de todo (las comprobaciones de mayúsculas y minúsculas necesitan un acceso al sistema), debe encontrar la forma que mejor se adapte a sus necesidades
Frederik.L

-1

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;
    }
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.