Capslock Detection mit Javascript

KENNT IHR DAS AUCH? IHR MÜSST DIE LOGIN INFOS MAL WIEDER DOPPELT AUSFÜLLEN, WEIL IHR AUS VERSEHEN DIESES RELIKT AUS EINER GRAUEN VORZEIT NAMENS CAPSLOCK AKTIVIERT HATTET? Damit Eure User nicht die gleiche Erfahrung machen müssen, könnt Ihr einen kleinen, aber dezenten Hinweis geben. Im folgenden gibt's ein kleines Snippet für Javascript mit und ohne jQuery.

Tatsächlich geben einige Browser bzw. Betriebssysteme bereits Hinweise auf eine aktivierte Feststelltaste. Chrome zum Beispiel blendet innerhalb des Passwortfeldes ein kleines Icon ein. Auch User mit weniger Benutzerfreundlichen Browsern sollten allerdings nicht im Dunkeln tappen.

Bevor wir loslegen müssen wir uns mit einer unangenehmen Tatsache abfinden. Eine aktivierte Capslock-Taste lässt sich nur mittels Key-Events (z.B. keypress) ermitteln. Eine andere Möglichkeit mit reinem Javascript besteht nicht. Allerdings gibt es jQuery-Plugins, wie capslockstate, die den Zustand der Capslock-Taste tracken. Wir wollen hier allerdings eine etwas einfachere Lösung wählen.

Definieren wir also zuerst einmal ein einfaches Passwortfeld:

<input type="password" name="myPassword" onkeypress="checkCapslock(event)">

Mit Javascript lässt sich der Zustand der Capslock-Taste nur indirekt ermitteln, weil der Event an sich keine Capslock-Taste kennt. Wir prüfen also welches Zeichen eingegeben wurde und kontrollieren ob die Shift-Taste gedrückt wird.

Dann versuchen wir den Groß-Klein-Zustand des Zeichens zu ändern und schauen ob es das Gleiche bleibt. Bei einem positiven Test, fügen wir dem Passwortfeld eine Klasse "capslock" hinzu. Andernfalls entfernen wir sie.

function checkCapslock(e) {
  var c = String.fromCharCode(e.which),
  capslockActive = (c.toUpperCase() === c && c.toLowerCase() !== c && !e.shiftKey);
  if (capslockActive) {
    $(this).addClass('capslock');
  }
  else {
    $(this).removeClass('capslock');
  }
}

Kein jQuery zur Hand, kein Problem. Das Ganze funktioniert natürlich auch ohne jQuery.

function checkCapslock(e) {
  var c = String.fromCharCode(e.which),
  capslockActive = (c.toUpperCase() === c && c.toLowerCase() !== c && !e.shiftKey);
  if (capslockActive && e.target.className.indexOf('capslock') === -1) {
    e.target.className += ' capslock';
  }
  else if (!capslockActive && e.target.className.indexOf('capslock') !== -1) {
    e.target.className = e.target.className.replace(' capslock', '');
  }
}

Die Klasse "capslock" könnt Ihr verwenden, um das Passwortfeld ansprechend zu gestalten bzw. einen kleinen Hinweis einzublenden. Zum Beispiel so dezent wie hier:

.capslock { background: red; }

Viel Spaß beim Ausprobieren. Im Anschluss findet Ihr noch ein paar interessante Links und weitere Möglichkeiten zur Capslock-Detection.

• https://github.com/nosilleg/capslockstate-jquery-plugin

• http://stackoverflow.com/questions/2308895/detect-caps-lock-on-off-using-jquery

• http://stackoverflow.com/questions/11881359/check-for-capslock-on-in-onfocus-event