¿Cómo se puede saber si el bloqueo de mayúsculas está activado al usar JavaScript?

StackOverflow https://stackoverflow.com/questions/348792

  •  20-08-2019
  •  | 
  •  

Pregunta

¿Cómo se puede saber si el bloqueo de mayúsculas está activado al usar JavaScript?

Sin embargo, una advertencia:Lo busqué en Google y la mejor solución que pude encontrar fue adjuntar un onkeypress evento a cada entrada, luego verifique cada vez si la letra presionada estaba en mayúscula, y si lo era, luego verifique si también se mantuvo presionada la tecla Mayús.Si no fuera así, el bloqueo de mayúsculas debe estar activado.Esto se siente realmente sucio y simplemente... antieconómico - ¿Seguramente hay una manera mejor que esta?

¿Fue útil?

Solución

Esto me pareció 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 teclas según sea necesario. Debe obtener el rango de códigos de teclas 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 ...

mayúsculas A-Z o '& # 196;', '& # 214;', '& # 220;', minúsculas a-Z o 0-9 o '& # 228;', '& # 246;', '& # 252;'

Las teclas anteriores son solo una muestra de representación.

Otros consejos

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 necesita s.toLowerCase() !== s.

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

La getModifierState función proporcionará la estado para:

  • Alt
  • AltGraph
  • CapsLock
  • Control
  • Fn (Android)
  • Meta
  • Bloq Num
  • SO (Windows & amp; Linux)
  • ScrollLock
  • Shift

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

Puede detectar el bloqueo de mayúsculas usando " es letra mayúscula y no se presiona ninguna tecla " utilizando 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 del 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 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 caracteres internacionales (use toUpperCase() para evitar eso).

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 verificará para eso, 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 (mayúsculas o sin mayúsculas), apagará la advertencia si se presiona una tecla alfa sin mayúsculas, pero no la apagará ni la 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)
  });

En JQuery.Esto cubre el manejo de eventos en Firefox y buscará caracteres inesperados en mayúsculas y minúsculas.Esto presupone una <input id="password" type="password" name="whatever"/>elemento y un elemento separado con id 'capsLockWarning' que tiene la advertencia que queremos mostrar (pero, de lo contrario, está oculta).

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

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: Vea 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í.

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 así: 

<input type="password" name="txtPassword" onkeypress="capsCheck(event,this);" />
<div id="capsWarningDiv" style="visibility:hidden">Caps Lock is on.</div>

Esta es una solución que, además de comprobar el estado al escribir, también alterna el mensaje de advertencia cada vez que se escribe. Bloq Mayús Se presiona la tecla (con algunas limitaciones).

También admite letras que no están en inglés fuera del rango A-Z, ya que compara el carácter de la cadena con toUpperCase() y toLowerCase() en lugar de comparar con 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 el bloqueo de mayúsculas solo es útil si conocemos el estado del bloqueo de mayúsculas antes de que se active el bloqueo de mayúsculas. Bloq Mayús se presiona la tecla .El estado actual de bloqueo de mayúsculas se mantiene con un caps Propiedad de JavaScript en el elemento de contraseña.Esto se configura la primera vez que validamos el 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 podremos observar el bloqueo de mayúsculas, por lo que debemos restablecerla a un estado desconocido.

Usamos getModifierState para 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 las que el campo de contraseña se enfocará es con un clic o una pestaña. Usamos onclick para verificar 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 está enfocado automáticamente, entonces el evento no sucederá hasta que se suelte la primera clave, 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

Recientemente hubo un 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

Para jQuery con twitter bootstrap

Comprobar mayúsculas bloqueadas para los siguientes caracteres:

mayúsculas AZ o '& # 196;', '& # 214;', '& # 220;', '!', '"', '& # 167; ',' $ ','% ',' & Amp; ',' / ',' (',') ',' = ',': ','; ',' * ',' ' '

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

demostración en vivo en jsfiddle

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

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

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

Simplemente inclúyalo en sus páginas web: 

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

Luego úsalo 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.

Sin embargo, otra versión, clara y simple, maneja mayúsculas y mayúsculas desplazadas, y sin restricciones 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 se invirtió, doh, se arregló.

Editar # 2: Después de comprobar esto un poco más, he realizado algunos cambios, un código un poco más detallado, desafortunadamente, pero maneja más acciones de manera apropiada.

  • 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 se vean 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 existe la posibilidad de que los idiomas no occidentales tengan un puntaje de puntuación y / o un código de puntuación lo suficientemente diferentes como para ser un problema, pero nuevamente vale la pena en mi opinión, al menos para mi situación.

React 

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

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.

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

Hice que el código sea una función para que pueda reutilizarse, 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>

Mottie's y Diego Vieira respuesta anterior 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 como así capsLockIsOnKeyDown.capsLockIsOnKeyDown(event)

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

En el siguiente código, se mostrará alerta cuando las mayúsculas se bloqueen y presionen la tecla usando Mayús.

si devolvemos falso; entonces el carácter 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;
    }
});

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

Esta es la secuencia de comandos 

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

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

Puede usar

Aquí hay un complemento jquery personalizado, que utiliza 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 complemento 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();
});

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>

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

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 brinda una variable capsIsOn 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 carácter actual a 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.

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;
    }
}
No afiliado a StackOverflow
scroll top