Cómo detectar las mayúsculas «Caps Lock» con JavaScript

Una de las situaciones más frecuentes a la hora de recordar contraseñas es saber si la escribiste con mayúsculas o con minúsculas, por eso algunos programas incluyen un mecanismo para identificar cuando tienes presionada/activada la tecla «Caps Lock» o «Bloq Mays» pero para la web es imposible detectar cuando tenemos activada dicha tecla.

Pero no todo es imposible ya que con un simple truco podemos deducir que está activada, lo que podemos hacer es gracias a la programación DOM que podemos ser notificados cuando presionamos alguna tecla para escribir alguna letra, cuando una tecla es presionada en realidad se obtiene un código ASCII del caracter en cuestión los caracteres en mayúsculas tiene un código ASCII que vá desde el 65 hasta el 90, para eso existe un script escrito en JavaScript llamado jsCapsLock.

Cómo usar jsCapsLock

Primero descargamos el Script desde aquí, luego incluimos este código dentro del head de nuestro HTML:

<script src="jscapslock.js" type="text/javascript"></script>
<script type="text/javascript">
    capslock.show_warning(target) {
    // Puedes poner una alerta para avisar al usuario
    }
    capslock.hide_warning(target) {
    // aquí ocultas la alerta
    }
</script>

Puedes ver un ejemplo de su funcionamiento. Más información en 24 Ways que es donde aprendí esto.

Escríbe un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

4 comentarios en “Cómo detectar las mayúsculas «Caps Lock» con JavaScript”

  1. Hola, me ha encantado el articulo y me parece un escript bastante util y elegante, lo unico que me gustaria saber es como puedo cambiar la imagen, porque aunque he modificado la ruta de mil maneras distintas la verdad es que no he conseguido hacerlo.

    Espero su respuesta atentamente. Atentamente Javi

  2. Por que en el ejemplo no se incluye esta parte del código:
    En mi caso general un error : Error: missing ; before statement capslock.show_warning(target){

    capslock.show_warning(target) {
    // Puedes poner una alerta para avisar al usuario
    }
    capslock.hide_warning(target) {
    // aquí ocultas la alerta
    }