Question

I’m trying to build a communal wall, that appears the same for all those who access the web page, and syncs between users. I’m struggling to capture keyboard input correctly to apply to the canvas. My function is based on document.onkeydown, and can be seen in the ‘script.js’ referenced in the said web page. It can be seen working when you double click a word and the write.

Unfortunately this seems to be failing to capture anything but capital letters, and I’m looking for an alternate way to go about this. I’ve looked into the ‘textInput’ event, described in this page, however it seems to be only supported by WebKit browsers, and I want to build something which works generically. Can someone suggest an alternate way to go about capturing keyboard input for use in canvas? Or perhaps I’m doing something silly?

Code described is here:

document.onkeydown = keyHandler;
function keyHandler(e)
{

    var pressedKey;
    if (document.all) { e = window.event;
        pressedKey = e.keyCode; }
    if (e.which) {
        pressedKey = e.which;
    }
    if (pressedKey == 8) {
        e.cancelBubble = true; // cancel goto history[-1] in chrome
        e.returnValue = false;
    }
    if (pressedKey == 27)
    {
        // escape key was pressed
        keyCaptureEdit = null;
    }
    if (pressedKey != null && keyCaptureEdit != null)
    {
        keyCaptureEdit.callback(pressedKey);
    }

}
... Later on in code describing each text object ...

keyCaptureEdit.callback = function (keyCode) {
    var keyCaptured = String.fromCharCode(keyCode);
    if (keyCaptured == "\b" ) { //backspace character
        t.attrs.timestamp = t.attrs.timestamp + 1;
        t.setText(t.getText().slice(0, -1));
    }
    else if (keyCode == 32 || keyCode >= 48 && keyCode <= 57 || keyCode >= 65 && keyCode <=  90)
    {
        t.attrs.timestamp = t.attrs.timestamp + 1;
        t.setText(t.getText() + keyCaptured);
    }            
    layer.draw();
}

Answer 1

Well one trivial way to change your code would be to keep track of the shift key:

    ...
    {
        keyCaptureEdit.callback(pressedKey, e.shiftKey); // <-- keep track of shift key
    }

}

...

keyCaptureEdit.callback = function (keyCode, shift) {
    var keyCaptured = String.fromCharCode(keyCode);
    // shift key not pressed? Then it's lowercase
    if (shift === false) keyCaptured = keyCaptured.toLowerCase()

But that doesn’t account for CapsLock.

In jQuery its really simple because the right key code is done for you:

$(document).keypress(function(event) {
  var keyCaptured = String.fromCharCode(event.keyCode);
  console.log(keyCaptured);
});

In that example the console will correctly log P or p depending on what would be typed.