Michael: JavaScript: Erkennen von aktivem "Caps Lock" bei gedrückten Ziffern-Tasten

Beitrag lesen

Hallo, folgendes Problem:

In einer relativ komplexen Webanwendung (sonst alles schon fertig, es geht nur noch um partielle Verbesserungen und alles mal schnell umbauen kommt da nicht in Frage, wenn, dann auf Basis einzelner Event-Handler-Funktionen) sollen in Formular-Eingabefeldern, in denen numerische Werte erwartet werden, neben paar wenigen Ausnahmen wie Backspace und Delete ansonsten nur Ziffern eingegeben werden können.

Nun sieht es danach aus, dass u.a. auf deutschen Tastaturen bei aktivem Caps Lock zwar die Sonderzeichen statt der Ziffern eingefügt werden, sich der aktive Caps Lock aber (in diesem Fall) auch nicht so ohne Weiteres abfragen lässt. Obwohl von den im JavaScript-Code empfangenen Werten her also alles aussieht, als ob eine Ziffer gedrückt worden wäre, erscheint im Eingabefeld eben doch das Sonderzeichen, was dort eben nicht reinsoll. (Serverseitige Validierung findet auch noch statt, aber abgesehen davon soll der User vorher schon unmittelbar merken, was erlaubt ist und was nicht, bevor so ein Formular zig mal auf dem Server verarbeitet werden muss.)


Eingabefeld:


<input type="text" onkeydown="return onlyNumbers( event )">


Die Funktion onlyNumbers( ... ):


function onlyNumbers(evt, decimalseparator) {
    if ((evt.type) && (evt.type != 'keydown') && (evt.type != 'keypress')) {
        alert('please implement this function on event "onkeydown" only! In this case the event "' + evt.type + '" was triggered.');
    }
    var keyCode = evt.keyCode;
    var shiftKeyPressed = evt.shiftKey;
    var ctrlKeyPressed = evt.ctrlKey;

    if (keyCode === 8 || keyCode === 9 || keyCode === 13 || keyCode === 17 || keyCode === 27 || (ctrlKeyPressed && keyCode === 86) || (!shiftKeyPressed && keyCode >= 48 && keyCode <= 57) || (keyCode == 46) || (keyCode >= 35 && keyCode <= 40) || (keyCode >= 96 && keyCode <= 105))
        return true;
    var charCode = evt.charCode;

    if (typeof decimalseparator !== 'undefined')
    { // point (.) is always allowed charCode=46
        if (keyCode === 190)
            return true; // || charCode == decimalseparator.charCodeAt(0) || (charCode >= 48 && charCode <= 57);
    }

    return false;
}

Hat jemand irgendwann schon mal eine Lösung gefunden, wie man in JavaScript (nativ oder auch durch Dazuhängen einer kleinen Bibliothek) abfragen kann, ob bei Drücken einer Ziffer aus der Ziffern-Reihe über dem Buchstaben-Block der Caps Lock aktiv ist?

Bisher ist in der Anwendung noch alles in XHTML geschrieben. HTML5-Attribute wie

text="number"

kommen eher nicht als Lösung in Frage...

Gruß Michael