JS Keyboard Utils Class to Implement Keyboard Shortcuts

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
}
});