Javascript keyboard, shift + key combo

Question

I'm creating a on-screen-keyboard in vanilla Javascript and I'm trying to change the color of the on-screen-keyboard-keys when the same keys are pressed on the physical keyboard. So far so good. The problem is, I am using keyup and keydown, but I can't seem to get the shift-combos right.

This is whats going to happen:

When a normal key is pressed it changes color to blue.
When the shift-key is pressed it changes color to red.
When the shift-key + a key is pressed, both of them is going to be red, and when the key is released it is going back to normal, but if the shift-key is still being held down it will have the color red.

Problem: When the shift-key is pressed + a normal key, the color on both buttons will dissapear if I release the normal key, even if the shift-key is still pressed.

This is my code so far:

farge1 = ' key-pressed';
farge2 = ' shift-pressed';
shift = false;




var klikk = function(e) {
e = e || window.event;
var k = e.keyCode || e.which;

if (k === 13) {
    document.getElementById('enter').className += (farge1);
} else if (k === 8) {
    document.getElementById('backspace').className += (farge1);
} else if (k === 16) {
    document.getElementById('shift-right').className += (farge2);
    document.getElementById('shift-left').className += (farge2);
    shift = true;
}

};

var bokstav = function(e) {
e = e || window.event;
var b = String.fromCharCode(e.which).toLowerCase();

if (shift === true) {
    document.getElementById(b).className += (farge2);
} else {
    document.getElementById(b).className += (farge1);
}
};


var slipp = function(e) {
e = e || window.event;
var k = e.keyCode || e.which;
var b = String.fromCharCode(e.which).toLowerCase();

document.getElementById('enter').className = ("");
document.getElementById('backspace').className = ("");

document.getElementById(b).className = ("");
if (k !== 16) {
    document.getElementById('shift-left').className = ("");
    document.getElementById('shift-right').className = ("");
}
shift = false;

};


document.onkeypress = bokstav;
document.onkeydown = klikk;
document.onkeyup = slipp;

I'm totally new at this.. No jQuery pls

Bic Bic · Accepted Answer · 2014-02-10T17:43:43

Your code has an error in it, that is caused by the keypress event. The event is continuously firing whenever you are holding the shift key down. However, String.fromCharCode(e.which) will always return an empty string for Shift, which is not a printable character. You need to add logic to your keypress event to handle shift:

var bokstav = function(e) {
    e = e || window.event;
    var b = String.fromCharCode(e.which).toLowerCase();

    if (b) { // make sure b has a value
        if (shift === true) {
            document.getElementById(b).className += (farge2);
        } else {
            document.getElementById(b).className += (farge1);
        }
    }
};

To prevent shift from changing on a normal keyup:

document.getElementById(b).className = ("");
if (k === 16) {
    document.getElementById('shift-left').className = ("");
    document.getElementById('shift-right').className = ("");
    shift = false;
}

Here is a Fiddle. This will only work for the 'a' or 'shift' + 'a' presses.

Javascript keyboard, shift + key combo

1 Answers