JavaScript keyboard utils Class to Implement Keyboard Shortcuts

keyboard-utils

In application development many times we required to use keyboard shortcuts. Let’s talk about copy paste or undo redo operations here we required CTRL + C for copy, CRTL + V for paste or CRTL + Z for undo & CRTL + Y for redo. Web application runs over Client Server architecture. During web application development we prefer to do use more Client resources rather than server resources. This technique improves application performance & speed. That’s why experienced programmers prefer to Implement keyboard shortcuts using Client side scripts.

In this knowledge sharing session I am sharing a JavaScript class which will help you to implement all required keyboard shortcuts. The keyboard keys I implemented with keydown & keyup events are Ctrl, Shift, Delete, Esc, Down Arrow, Up Arrow, Right Arrow, Left Arrow, C & V.

To implement this class in your application just copy the below codes into a js file (keyboardUtils.js). Then integrate this js file to your application.

keyboardUtils.js

KeyboardUtil = function () {
var exports = {};
var _kpRegisters = [];

exports.KEY_STROKES = {
ESC: 0,
CTRL: 1,
LEFT_ARROW: 2,
RIGHT_ARROW: 3,
UP_ARROW: 4,
DOWN_ARROW: 5,
DELETE: 6,
SHIFT: 7,
C: 8,
V: 9
};

exports.ActiveKeyStrokes = [];

exports.bindToKeyPress = function (key, callback) {

if (typeof (callback) == "function") {

switch (key) {

case exports.KEY_STROKES.SHIFT:
registerCallBack(exports.KEY_STROKES.SHIFT, callback);
break;

case exports.KEY_STROKES.CTRL:
registerCallBack(exports.KEY_STROKES.CTRL, callback);
break;

case exports.KEY_STROKES.DELETE:
registerCallBack(exports.KEY_STROKES.DELETE, callback);
break;

case exports.KEY_STROKES.ESC:
registerCallBack(exports.KEY_STROKES.ESC, callback);
break;

case exports.KEY_STROKES.LEFT_ARROW:
registerCallBack(exports.KEY_STROKES.LEFT_ARROW, callback);
break;

case exports.KEY_STROKES.RIGHT_ARROW:
registerCallBack(exports.KEY_STROKES.RIGHT_ARROW, callback);
break;

case exports.KEY_STROKES.UP_ARROW:
registerCallBack(exports.KEY_STROKES.UP_ARROW, callback);
break;

case exports.KEY_STROKES.DOWN_ARROW:
registerCallBack(exports.KEY_STROKES.DOWN_ARROW, callback);
break;

case exports.KEY_STROKES.C:
registerCallBack(exports.KEY_STROKES.C, callback);
break;

case exports.KEY_STROKES.V:
registerCallBack(exports.KEY_STROKES.V, callback);
break;
default:
break;
}
}
}

function registerCallBack(type, callback) {
if (_kpRegisters[type]) {

_kpRegisters[type].push(callback);
}
else {
var fnctrs = new Array();
fnctrs.push(callback);
_kpRegisters[type] = fnctrs;
}
}

function invokeCallBack(type, evt) {

if (_kpRegisters[type]) {
for (i = 0; i < _kpRegisters[type].length; i++) {
(_kpRegisters[type][i])(evt);
}
}
}

$(document).on("keydown", function (evt) {
switch (evt.keyCode) {

case 16:    // Shift Key
exports.ActiveKeyStrokes[exports.KEY_STROKES.SHIFT] = true;
invokeCallBack(exports.KEY_STROKES.SHIFT, evt);
break;

case 17:    // Ctrl Key
exports.ActiveKeyStrokes[exports.KEY_STROKES.CTRL] = true;
invokeCallBack(exports.KEY_STROKES.CTRL, evt);
break;

case 46:    // Delete Key
exports.ActiveKeyStrokes[exports.KEY_STROKES.DELETE] = true;
invokeCallBack(exports.KEY_STROKES.DELETE, evt);
break;

case 27:    // Esc Key
exports.ActiveKeyStrokes[exports.KEY_STROKES.ESC] = true;
invokeCallBack(exports.KEY_STROKES.ESC, evt);
break;

case 40:    // Down Arrow Key
exports.ActiveKeyStrokes[exports.KEY_STROKES.DOWN_ARROW] = true;
invokeCallBack(exports.KEY_STROKES.DOWN_ARROW, evt);
break;

case 39:    // Right Arrow Key
exports.ActiveKeyStrokes[exports.KEY_STROKES.RIGHT_ARROW] = true;
invokeCallBack(exports.KEY_STROKES.RIGHT_ARROW, evt);
break;

case 38:    // Up Arrow Key
exports.ActiveKeyStrokes[exports.KEY_STROKES.UP_ARROW] = true;
invokeCallBack(exports.KEY_STROKES.UP_ARROW, evt);
break;

case 37:    // Left Arrow Key
exports.ActiveKeyStrokes[exports.KEY_STROKES.LEFT_ARROW] = true;
invokeCallBack(exports.KEY_STROKES.LEFT_ARROW, evt);
break;

case 67:
case 99:// C Key
exports.ActiveKeyStrokes[exports.KEY_STROKES.C] = true;
invokeCallBack(exports.KEY_STROKES.C, evt);
break;

case 86:
case 118:   // V Key
exports.ActiveKeyStrokes[exports.KEY_STROKES.V] = true;
invokeCallBack(exports.KEY_STROKES.V, evt);
break;
default:
break;
}
});

$(document).on("keyup", function (evt) {
switch (evt.keyCode) {

case 16:    // Shift Key
exports.ActiveKeyStrokes[exports.KEY_STROKES.SHIFT] = false;
break;

case 17:    // Ctrl Key
exports.ActiveKeyStrokes[exports.KEY_STROKES.CTRL] = false;
break;

case 46:    // Delete Key
exports.ActiveKeyStrokes[exports.KEY_STROKES.DELETE] = false;
break;

case 27:    // Esc Key
exports.ActiveKeyStrokes[exports.KEY_STROKES.ESC] = false;
break;

case 40:    // Down Key
exports.ActiveKeyStrokes[exports.KEY_STROKES.DOWN_ARROW] = false;
break;

case 39:    // Right Arrow Key
exports.ActiveKeyStrokes[exports.KEY_STROKES.RIGHT_ARROW] = false;
break;

case 38:    // Up Arrow Key
exports.ActiveKeyStrokes[exports.KEY_STROKES.UP_ARROW] = false;
break;

case 37:    // Left Arrow Key
exports.ActiveKeyStrokes[exports.KEY_STROKES.LEFT_ARROW] = false;
break;

case 67:
case 99:// C Key
exports.ActiveKeyStrokes[exports.KEY_STROKES.C] = false;
break;

case 86:
case 118:   // V Key
exports.ActiveKeyStrokes[exports.KEY_STROKES.V] = false;
break;
default:
break;
}
});

return exports;
};

After integrated the above Class file. Create an instance for the KeyboardUtil class. Then using the following code you can use most common keyboard shortcuts in your app.

_keyUtil = new KeyboardUtil();

_keyUtil.bindToKeyPress(_keyUtil.KEY_STROKES.LEFT_ARROW, function (event) {
//ToDo for Left Arrow         
});

_keyUtil.bindToKeyPress(_keyUtil.KEY_STROKES.C, function () {
if (_keyUtil.ActiveKeyStrokes[_keyUtil.KEY_STROKES.CTRL]) {
//Ctrl + C
}
});

_keyUtil.bindToKeyPress(_keyUtil.KEY_STROKES.V, function () {
if (_keyUtil.ActiveKeyStrokes[_keyUtil.KEY_STROKES.CTRL]) {
//Ctrl + V
}
});