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

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

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.

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.

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

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

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

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

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

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

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> 

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.

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

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

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

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.

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.

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.

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.

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

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>

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

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

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> 

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

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

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

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

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.

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