Detect keyCode issue wrong value
<p>I need to detect when user select on keyboard letter <code>]</code> KeyCode: 221 and return the letter <code>]</code> on the dom.</p>

<p>My problem is:</p>

<p>The value returned by <code>event.keyCode</code> is different if the event is returned from an <code>input</code> element or <code>document</code>.</p>

<p>Also</p>

<p>testing the following issue on Chrome Version 55.0</p>

<p>I get for input:
event.keyCode: 93 - String.fromCharCode: ]</p>

<p>I get for document:
event.keyCode: 221 - String.fromCharCode: Ý</p>

<p>and on Firefox 50.1.0</p>

<p>I get for input:
event.keyCode: 0 - String.fromCharCode: </p>

<p>I get for document:
event.keyCode: 221 - String.fromCharCode: Ý</p>

<p>I would need to know:</p>

<ul>
<li>What is wrong with my code?</li>
<li>What is a consistent way to have the same value?</li>
</ul>

<p>Notes: I am using a ENG United State international keyboard (could this be relevant?).</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var input = document.getElementById('input');
var result = document.getElementById('result');
input.addEventListener('keypress', function(event) {
  result.innerHTML = `event.keyCode: ${event.keyCode} - String.fromCharCode: ${String.fromCharCode(event.keyCode)}`;

});

var resultDocument = document.getElementById('resultDocument');

document.addEventListener('keydown', function(event){
  resultDocument.innerHTML = `event.keyCode: ${event.keyCode} - String.fromCharCode: ${String.fromCharCode(event.keyCode)}`;
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input id="input" type="text" size="40"&gt;
&lt;div id="result"&gt;&lt;/div&gt;

&lt;h1&gt;On document&lt;/h1&gt;
&lt;div id="resultDocument"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>