Backslash key code is recognized as german umlaut

Question

I use onkeydown event and read pressed key from event object:

function test(e) {
   e = e || window.e;
   var keyCode = e.which || e.keyCode;

   alert(keyCode +' -> '+ String.fromCharCode(keyCode));
}

Above function works weird if user press backslash key (\) - it always return Ü instead of \. Value of e.keyCode is 220 what means that everything is ok, so probably fromCharCode() is an issue. I think that the problem is a fact that backslash is a special character. But how can I omit it and display proper char for 220 code?

I have made live example on JSFiddle.

Answer 1

While the keyCode attribute has been deprecated, the code attribute behaves similarly. The key attribute may help in the given usecase, as it will give you the character according to the keyboard layout.

In https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode the reason for the weired behavior is found. It is that browsers map non-symbol characters to some other values.

Specifically look at the table keyCode values of each browser's keydown event caused by printable keys in standard position (punctuations in US layout), where it is documented that a backslash can either map to code 220 or 221 depending on your browser, keyboard layout and operating system.

As this behavior seems exceedingly confusing, i would suggest just using the key attribute.

    function test(e) {
       e = e || window.e;
       var keyCode = e.which || e.code;
       
       alert(keyCode +' -> '+ e.key);
    }

If you are using a US-keyboard layout, pressing backslash should produce "220 -> \"

Answer 2

Problem here is that you try to match keyboard key code to actual letter of keyboard layout.

E.g (test keyboard key code):

1. My keyboard layout is en-US
2. I press 2 and key code is 50
3. I change keyboard layout (or keyboard language) to lt-LT
4. I now press same key, but now it should output č, but key code is still 50.

---

You should have some some letter-to-key-code map, but you will never match all keyboard layouts.

function displayKeyCode(evt) {
  var textBox = getObject('txtChar');
  var charCode = (evt.which) ? evt.which : event.keyCode
  textBox.value = String.fromCharCode(charCode);
  if (charCode == 8) textBox.value = "backspace"; //  backspace
  if (charCode == 9) textBox.value = "tab"; //  tab
  if (charCode == 13) textBox.value = "enter"; //  enter
  if (charCode == 16) textBox.value = "shift"; //  shift
  if (charCode == 17) textBox.value = "ctrl"; //  ctrl
  if (charCode == 18) textBox.value = "alt"; //  alt
  if (charCode == 19) textBox.value = "pause/break"; //  pause/break
  if (charCode == 20) textBox.value = "caps lock"; //  caps lock
  if (charCode == 27) textBox.value = "escape"; //  escape
  if (charCode == 33) textBox.value = "page up"; // page up, to avoid displaying alternate character and confusing people	         
  if (charCode == 34) textBox.value = "page down"; // page down
  if (charCode == 35) textBox.value = "end"; // end
  if (charCode == 36) textBox.value = "home"; // home
  if (charCode == 37) textBox.value = "left arrow"; // left arrow
  if (charCode == 38) textBox.value = "up arrow"; // up arrow
  if (charCode == 39) textBox.value = "right arrow"; // right arrow
  if (charCode == 40) textBox.value = "down arrow"; // down arrow
  if (charCode == 45) textBox.value = "insert"; // insert
  if (charCode == 46) textBox.value = "delete"; // delete
  if (charCode == 91) textBox.value = "left window"; // left window
  if (charCode == 92) textBox.value = "right window"; // right window
  if (charCode == 93) textBox.value = "select key"; // select key
  if (charCode == 96) textBox.value = "numpad 0"; // numpad 0
  if (charCode == 97) textBox.value = "numpad 1"; // numpad 1
  if (charCode == 98) textBox.value = "numpad 2"; // numpad 2
  if (charCode == 99) textBox.value = "numpad 3"; // numpad 3
  if (charCode == 100) textBox.value = "numpad 4"; // numpad 4
  if (charCode == 101) textBox.value = "numpad 5"; // numpad 5
  if (charCode == 102) textBox.value = "numpad 6"; // numpad 6
  if (charCode == 103) textBox.value = "numpad 7"; // numpad 7
  if (charCode == 104) textBox.value = "numpad 8"; // numpad 8
  if (charCode == 105) textBox.value = "numpad 9"; // numpad 9
  if (charCode == 106) textBox.value = "multiply"; // multiply
  if (charCode == 107) textBox.value = "add"; // add
  if (charCode == 109) textBox.value = "subtract"; // subtract
  if (charCode == 110) textBox.value = "decimal point"; // decimal point
  if (charCode == 111) textBox.value = "divide"; // divide
  if (charCode == 112) textBox.value = "F1"; // F1
  if (charCode == 113) textBox.value = "F2"; // F2
  if (charCode == 114) textBox.value = "F3"; // F3
  if (charCode == 115) textBox.value = "F4"; // F4
  if (charCode == 116) textBox.value = "F5"; // F5
  if (charCode == 117) textBox.value = "F6"; // F6
  if (charCode == 118) textBox.value = "F7"; // F7
  if (charCode == 119) textBox.value = "F8"; // F8
  if (charCode == 120) textBox.value = "F9"; // F9
  if (charCode == 121) textBox.value = "F10"; // F10
  if (charCode == 122) textBox.value = "F11"; // F11
  if (charCode == 123) textBox.value = "F12"; // F12
  if (charCode == 144) textBox.value = "num lock"; // num lock
  if (charCode == 145) textBox.value = "scroll lock"; // scroll lock
  if (charCode == 186) textBox.value = ";"; // semi-colon
  if (charCode == 187) textBox.value = "="; // equal-sign
  if (charCode == 188) textBox.value = ","; // comma
  if (charCode == 189) textBox.value = "-"; // dash
  if (charCode == 190) textBox.value = "."; // period
  if (charCode == 191) textBox.value = "/"; // forward slash
  if (charCode == 192) textBox.value = "`"; // grave accent
  if (charCode == 219) textBox.value = "["; // open bracket
  if (charCode == 220) textBox.value = "\\"; // back slash
  if (charCode == 221) textBox.value = "]"; // close bracket
  if (charCode == 222) textBox.value = "'"; // single quote
  var lblCharCode = getObject('spnCode');
  lblCharCode.innerHTML = 'KeyCode:  ' + charCode;
  return false;
}

function getObject(obj) {
  var theObj;
  if (document.all) {
    if (typeof obj == 'string') {
      return document.all(obj);
    } else {
      return obj.style;
    }
  }
  if (document.getElementById) {
    if (typeof obj == 'string') {
      return document.getElementById(obj);
    } else {
      return obj.style;
    }
  }
  return null;
}

<input onkeypress="javascript:return false;" id="txtChar" onkeydown="javascript:return displayKeyCode(event)" name="txtChar" type="text"/><br/>
<span id="spnCode"></span>