Reputation: 4174
Are there any built in functions in any JavaScript framework to convert keyCodes into characters? Which accounts the shift property, so it will return the correct characters.
Or we just have to build our own function ?
Upvotes: 3
Views: 6281
Reputation: 4174
I have my own function too, I modified the script from http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
function convertKeyCode(evt) {
var chara = "";
var keyCode = (evt.which) ? evt.which : evt.keyCode;
var shift = evt.shiftKey;
//if (keyCode == 8)
// chara = "backspace";
// backspace
//if (keyCode == 9)
// chara = "tab";
// tab
//if (keyCode == 13)
// chara = "enter";
// enter
//if (keyCode == 16)
// chara = "shift";
// shift
//if (keyCode == 17)
// chara = "ctrl";
// ctrl
//if (keyCode == 18)
// chara = "alt";
// alt
if (keyCode == 19)
chara = "pause/break";
// pause/break
//if (keyCode == 20)
// chara = "caps lock";
// caps lock
//if (keyCode == 27)
// chara = "escape";
// escape
//if (keyCode == 33)
// chara = "page up";
// page up, to avoid displaying alternate character and confusing people
//if (keyCode == 34)
// chara = "page down";
// page down
//if (keyCode == 35)
// chara = "end";
// end
//if (keyCode == 36)
// chara = "home";
// home
//if (keyCode == 37)
// chara = "left arrow";
// left arrow
//if (keyCode == 38)
// chara = "up arrow";
// up arrow
//if (keyCode == 39)
// chara = "right arrow";
// right arrow
//if (keyCode == 40)
// chara = "down arrow";
// down arrow
//if (keyCode == 45)
// chara = "insert";
// insert
//if (keyCode == 46)
// chara = "delete";
// delete
// Alphanumeric
if (keyCode == 48)
chara = (shift) ? ")" : "0";
if (keyCode == 49)
chara = (shift) ? "!" : "1";
if (keyCode == 50)
chara = (shift) ? "@" : "2";
if (keyCode == 51)
chara = (shift) ? "#" : "3";
if (keyCode == 52)
chara = (shift) ? "$" : "4";
if (keyCode == 53)
chara = (shift) ? "%" : "5";
if (keyCode == 54)
chara = (shift) ? "^" : "6";
if (keyCode == 55)
chara = (shift) ? "&" : "7";
if (keyCode == 56)
chara = (shift) ? "*" : "8";
if (keyCode == 57)
chara = (shift) ? "(" : "9";
if (keyCode == 65)
chara = (shift) ? "A" : "a";
if (keyCode == 66)
chara = (shift) ? "B" : "b";
if (keyCode == 67)
chara = (shift) ? "C" : "c";
if (keyCode == 68)
chara = (shift) ? "D" : "d";
if (keyCode == 69)
chara = (shift) ? "E" : "e";
if (keyCode == 70)
chara = (shift) ? "F" : "f";
if (keyCode == 71)
chara = (shift) ? "G" : "g";
if (keyCode == 72)
chara = (shift) ? "H" : "h";
if (keyCode == 73)
chara = (shift) ? "I" : "i";
if (keyCode == 74)
chara = (shift) ? "J" : "j";
if (keyCode == 75)
chara = (shift) ? "K" : "k";
if (keyCode == 76)
chara = (shift) ? "L" : "l";
if (keyCode == 77)
chara = (shift) ? "M" : "m";
if (keyCode == 78)
chara = (shift) ? "N" : "n";
if (keyCode == 79)
chara = (shift) ? "O" : "o";
if (keyCode == 80)
chara = (shift) ? "P" : "p";
if (keyCode == 81)
chara = (shift) ? "Q" : "q";
if (keyCode == 82)
chara = (shift) ? "R" : "r";
if (keyCode == 83)
chara = (shift) ? "S" : "s";
if (keyCode == 84)
chara = (shift) ? "T" : "t";
if (keyCode == 85)
chara = (shift) ? "U" : "u";
if (keyCode == 86)
chara = (shift) ? "V" : "v";
if (keyCode == 87)
chara = (shift) ? "W" : "w";
if (keyCode == 88)
chara = (shift) ? "X" : "x";
if (keyCode == 89)
chara = (shift) ? "Y" : "y";
if (keyCode == 90)
chara = (shift) ? "Z" : "z";
// Alphanumeric
//if (keyCode == 91)
// chara = "left window";
// left window
//if (keyCode == 92)
// chara = "right window";
// right window
if (keyCode == 93)
chara = "select key";
// select key
//if (keyCode == 96)
// chara = "numpad 0";
// numpad 0
//if (keyCode == 97)
// chara = "numpad 1";
// numpad 1
//if (keyCode == 98)
// chara = "numpad 2";
// numpad 2
//if (keyCode == 99)
// chara = "numpad 3";
// numpad 3
//if (keyCode == 100)
// chara = "numpad 4";
// numpad 4
//if (keyCode == 101)
// chara = "numpad 5";
// numpad 5
//if (keyCode == 102)
// chara = "numpad 6";
// numpad 6
//if (keyCode == 103)
// chara = "numpad 7";
// numpad 7
//if (keyCode == 104)
// chara = "numpad 8";
// numpad 8
//if (keyCode == 105)
// chara = "numpad 9";
// numpad 9
//if (keyCode == 106)
// chara = "multiply";
// multiply
//if (keyCode == 107)
// chara = "add";
// add
//if (keyCode == 109)
// chara = "subtract";
// subtract
//if (keyCode == 110)
// chara = "decimal point";
// decimal point
//if (keyCode == 111)
// chara = "divide";
// divide
//if (keyCode == 112)
// chara = "F1";
// F1
//if (keyCode == 113)
// chara = "F2";
// F2
//if (keyCode == 114)
// chara = "F3";
// F3
//if (keyCode == 115)
// chara = "F4";
// F4
//if (keyCode == 116)
// chara = "F5";
// F5
//if (keyCode == 117)
// chara = "F6";
// F6
//if (keyCode == 118)
// chara = "F7";
// F7
//if (keyCode == 119)
// chara = "F8";
// F8
//if (keyCode == 120)
// chara = "F9";
// F9
//if (keyCode == 121)
// chara = "F10";
// F10
//if (keyCode == 122)
// chara = "F11";
// F11
//if (keyCode == 123)
// chara = "F12";
// F12
//if (keyCode == 144)
// chara = "num lock";
// num lock
//if (keyCode == 145)
// chara = "scroll lock";
// scroll lock
if (keyCode == 186)
chara = ";";
// semi-colon
if (keyCode == 187)
chara = "=";
// equal-sign
if (keyCode == 188)
chara = ",";
// comma
if (keyCode == 189)
chara = "-";
// dash
if (keyCode == 190)
chara = ".";
// period
if (keyCode == 191)
chara = "/";
// forward slash
if (keyCode == 192)
chara = "`";
// grave accent
if (keyCode == 219)
chara = (shift) ? "{" : "[";
// open bracket
if (keyCode == 220)
chara = "\\";
// back slash
if (keyCode == 221)
chara = (shift) ? "}" : "]";
// close bracket
if (keyCode == 222)
chara = "'";
// single quote
return chara;
}
Upvotes: 0
Reputation: 8477
You could use String.fromCharCode()
From MDN :
Syntax : String.fromCharCode(num1, ..., numN)
Parameters : num1, ..., numN
(A sequence of numbers that are Unicode values.)
This method returns a string and not a String object.
Because fromCharCode is a static method of String, you always use it as String.fromCharCode(), rather than as a method of a String object you created.
Here I made a function that would do what you want : http://jsbin.com/ukukuq/2/
function keyDownEvent(e) {
var other = {};
var output= {};
output['meta'] = {};
var html = '';
e = (e) ? e : ((event) ? event : null);
if (e) {
output['keyCode'] = (e.keyCode) ? e.keyCode : 'N/A';
output['charCode'] = (e.charCode) ? e.charCode : 'N/A';
output['meta']['shift'] = e.shiftKey ? true : false;
output['meta']['ctrl'] = e.ctrlKey ? true : false;
output['meta']['alt'] = e.altKey ? true : false;
output['meta']['meta'] = e.metaKey ? true : false;
html = document.getElementById('output')
return html.innerHTML += '<pre>keyDown : ' + JSON.stringify(output) + '</pre>';
} else {
return 'error';
}
}
function keyPressEvent(e) {
var other = {};
var output= {};
var html = '';
e = (e) ? e : ((event) ? event : null);
if (e) {
output['keyCode'] = (e.keyCode) ? e.keyCode : 'N/A';
output['charCode'] = (e.charCode) ? e.charCode : 'N/A';
html = document.getElementById('output')
return html.innerHTML += '<pre>keyPress : ' + JSON.stringify(output) + ' Character : <strong>' + String.fromCharCode(output['charCode']) + '</strong></pre><hr/>';
} else {
return 'error';
}
}
var test = document.getElementById('test');
test.onkeydown = keyDownEvent;
test.onkeypress = keyPressEvent;
Upvotes: 4