aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Cada vez más las aplicaciones web se están pareciendo a las llamadas «de escritorio», pero no solo en apariencia sinó tambien en funcionalidad y en usabilidad. Una muestra de ello es la posibilidad de informar al usuario de que el botón «Bloq Mayús» está activo a la hora de introducir una contraseña, con lo que evitas que el usuario se rompa los cuernos pensando en por que la contraseña que ha usado toda la vida no funciona en su página web.

En 24ways del 2007 han explicado como capturar el estado de esta tecla usando los atributos del evento lanzado al accionar el input indicado.

keypress: function(e) {
    var ev = e ? e : window.event;
    if (!ev) {
      return;
    }
    var targ = ev.target ? ev.target : ev.srcElement;
    // Cogemos la tecla pulsada
    var which = -1;
    if (ev.which) {
      which = ev.which;
    } else if (ev.keyCode) {
      which = ev.keyCode;
    }
    // Cogemos el estado de la tecla Bloq Mayus
    var shift_status = false;
    if (ev.shiftKey) {
      shift_status = ev.shiftKey;
    } else if (ev.modifiers) {
      shift_status = !!(ev.modifiers & 4);
    }
  },

Conociendo el keyCode obtenido podemos además saber si están usando las mayúsculas pero sin tener marcado el Bloq Mayús. Para ello tendremos que tratar el código recibido y conocer si estamos entre el rango otorgado a las letras mayúsculas.

if (((which >= 65 && which <=  90) && !shift_status) ||
        ((which >= 97 && which <= 122) && shift_status)) {
      // Mayuúsculas, sin Bloq Mayus
	...
    } else {
      // Mayusculas forzadas
	...
    }

En el ejemplo muestran una imagen indicando que tienes las mayúsculas activadas, pero es más para hacer bonito que práctico, así que he readaptado el script, para usar un nodo de texto anexado al input activo.

//Texto que mostraremos de alerta
var txtWarning = 'Ojo! tienes las mayusculas activas';
	
var capslock = {
  init: function() {
    if (!document.getElementsByTagName) {
      return;
    }
    var inps = document.getElementsByTagName("input");
    for (var i=0, l=inps.length; i<l; i++) {
      if (inps[i].type == "password") {
        capslock.addEvent(inps[i], "keypress", capslock.keypress);
      }
    }
  },
  addEvent: function(obj,evt,fn) {
    if (document.addEventListener) {
      capslock.addEvent = function (obj,evt,fn) {
        obj.addEventListener(evt,fn,false);
      };
      capslock.addEvent(obj,evt,fn);
    } else if (document.attachEvent) {
      capslock.addEvent = function (obj,evt,fn) {
        obj.attachEvent('on'+evt,fn);
      };
      capslock.addEvent(obj,evt,fn);
    } else { }
  },
  keypress: function(e) {
    var ev = e ? e : window.event;
    if (!ev) {
      return;
    }
    var targ = ev.target ? ev.target : ev.srcElement;
    var which = -1;
    if (ev.which) {
      which = ev.which;
    } else if (ev.keyCode) {
      which = ev.keyCode;
    }
    var shift_status = false;
    if (ev.shiftKey) {
      shift_status = ev.shiftKey;
    } else if (ev.modifiers) {
      shift_status = !!(ev.modifiers & 4);
    }
    if (((which >= 65 && which <=  90) && !shift_status) ||
        ((which >= 97 && which <= 122) && shift_status)) {
      capslock.show_warning(targ, this.parentNode);
    } else {
      capslock.hide_warning(targ, this.parentNode);
    }
  },

  show_warning: function(targ, elem) {
    if (!targ.warning) {
      targ.warning = document.createTextNode(txtWarning);
      elem.appendChild(targ.warning);
    }
  },
  hide_warning: function(targ, elem) {
    if (targ.warning) {
      elem.removeChild(targ.warning);
      targ.warning = null;
    }
  }
};