¿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 onkeypressevento a cada entrada, luego verificar cada vez si la letra presionada estaba en mayúscula y, si lo era, luego verificar 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... un desperdicio . ¿Seguramente hay una manera mejor que esta?

Dec 08 '08 13:12 nickf

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

La getModifierStatefunción proporcionará el estado de:

Alt.
AltGraph
Bloq Mayús
Control
Fn (Android)
Meta
Num lock
Sistema operativo (Windows y Linux)
Bloqueo de desplazamiento
Cambio

Esta demostración funciona en todos los navegadores principales, 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
});

Dec 14 '2015 21:12 Mottie

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

s.toLowerCase() !== sEs necesario evitar el error, como la tecla de retroceso .

May 22 '2009 05:05 user110902

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

NOTA: Ambas versiones funcionan para mí. Gracias por los 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 probarla en Mac y confirmarla)?

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:

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 verificación adicional para las siguientes claves según sea necesario. Debe obtener el rango de códigos clave para los caracteres que le interesan, puede ser mediante el uso de una matriz de asignación de claves que contendrá todas las claves válidas de los casos de uso a los que se dirige...

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

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

Dec 08 '2008 06:12 rajesh pillai

Puede detectar el bloqueo de mayúsculas usando "es una letra mayúscula y no se presiona Mayús" usando una captura de pulsación de tecla en el documento. Pero entonces será mejor que se asegure de que ningún otro controlador de pulsación de tecla haga estallar la burbuja del evento antes de que llegue al controlador del documento.

document.onkeypress = function ( e ) {
  e = e || window.event;
  var s = String.fromCharCode( e.keyCode || e.which );
  if ( (s.toUpperCase() === s) !== e.shiftKey ) {
    // alert('caps is on')
  }
}

Puede capturar el evento durante la fase de captura en navegadores que lo admitan, pero parece algo inútil ya que no funcionará en todos los navegadores.

No se me ocurre ninguna 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 no fue necesario detectarlos.

Hubo un artículo sobre 24 formas sobre esto el año pasado. Bastante bueno, pero carece de soporte de carácter internacional (uso toUpperCase()para evitar eso).

Dec 08 '2008 23:12 Borgar