By Daniel Du
I am asked how to get the character using JavaScript when pressing Shift key, String.fromCharCode() does not take into account the shift modifier, you can only get the number “5” but actually you want to get the special character “%".
This is much be a very common request for web developers like developers working on AIMS, and I searched a little and find this page is very helpful. One customer argues that it does not work for Safari, I did a test, it does work for Safari and other browsers, including Firefox, Chrome and IE.
Here is my test code:
<html>
<head>
<title >mapKeyPressToActualCharacter test</title>
<script language="javascript" type="text/javascript">
function onKeyPress() {
var e = window.event || e;
var keyCode = e.keyCode;
if (keyCode == 8) {
this.criteria.value = this.criteria.value.substring(
0, this.criteria.value.length - 1);
}
else {
this.criteria.value
+= mapKeyPressToActualCharacter(event.shiftKey, keyCode);
}
}
function mapKeyPressToActualCharacter(isShiftKey, characterCode) {
if (characterCode === 27
|| characterCode === 8
|| characterCode === 9
|| characterCode === 20
|| characterCode === 16
|| characterCode === 17
|| characterCode === 91
|| characterCode === 13
|| characterCode === 92
|| characterCode === 18) {
return false;
}
if (typeof isShiftKey != "boolean" || typeof characterCode != "number") {
return false;
}
var characterMap = [];
characterMap[192] = "~";
characterMap[49] = "!";
characterMap[50] = "@";
characterMap[51] = "#";
characterMap[52] = "$";
characterMap[53] = "%";
characterMap[54] = "^";
characterMap[55] = "&";
characterMap[56] = "*";
characterMap[57] = "(";
characterMap[48] = ")";
characterMap[109] = "_";
characterMap[107] = "+";
characterMap[219] = "{";
characterMap[221] = "}";
characterMap[220] = "|";
characterMap[59] = ":";
characterMap[222] = "\"";
characterMap[188] = "<";
characterMap[190] = ">";
characterMap[191] = "?";
characterMap[32] = " ";
var character = "";
if (isShiftKey) {
if (characterCode >= 65 && characterCode <= 90) {
character = String.fromCharCode(characterCode);
} else {
character = characterMap[characterCode];
}
} else {
if (characterCode >= 65 && characterCode <= 90) {
character = String.fromCharCode(characterCode).toLowerCase();
} else {
character = String.fromCharCode(characterCode);
}
}
return character;
}
</script>
</head>
<body>
<input name="test" type="text" onkeypress="onKeyPress();"/>
</body>
</html>
And here is my test result:
Hope this helps.
