In JavaScript, you can get the word definition of the key that was pressed, by looking at event.code, such as:
document.onkeypress = function(event) {
console.log(event.code);
};
When I press a, I get KeyA. When I press the arrow up key, I get ArrowUp. This is all fine for most keys, however, when I press a key like ½ on my keyboard with a Danish layout, I get Backquote, which is not correct.
Instead of grabbing the hardcoded value that JavaScript gives me, I thought about converting event.key instead, which returns the actual value of the keypress. For example, if I press SHIFT + 7 on my keyboard, event.key will return / which I want to be called slash (or forward slash).
Is there a way to convert a character to the actual word? I want an object/dictionary like this:
const keys = {
'/': 'forward slash', //or slash
'a': 'a',
'space': 'Space',
'"': 'Quotation mark',
'\'': 'Apostrophe'
};
and so on. Then I can do:
document.onkeypress = function(event) {
const characterPressed = keys[event.key];
console.log(characterPressed);
};
Is there a list I can iterate through to grab each value, or do I have to go through every character possible to be typed on a keyboard, and then map them manually? I'm basically looking for a "character to word definition" scheme.
Using the unicode data list mentioned in the comments to your question, this may be a way to retrieve the character names (the snippets contains a small part of the mentioned list):
const app = document.querySelector(`#app`);
let unicodeList = document.querySelector(`[data-raw]`).textContent.trim();
const firstUp = str => `${str[0].toUpperCase()}${str.slice(1).toLowerCase()}`;
unicodeList = unicodeList.split(`\n`)
.map(row => {
const line = row.trim().split(`;`);
return {
code: line[0],
decimal: parseInt(`0x${line[0]}`, 16),
get letter() {
return String.fromCharCode(`0x${this.code}`);
},
name: (line[1] || ``).startsWith(`<`) ? `-` : line[1],
}
});
app.insertAdjacentHTML(`beforeend`,
`<p>The unicode name for A is <b>${unicodeList.find(l => l.letter === `A`).name}</b></p>`);
app.insertAdjacentHTML(`beforeend`,
`<p>The unicode name for ½ is <b>${unicodeList.find(l => l.letter === `½`).name}</b></p>`);body {
font: 14px/18px normal verdana, arial;
margin: 2rem;
}
.hidden {
display: none;
}<pre id="app"></pre>
<pre class="hidden" data-raw="1">
00BD;VULGAR FRACTION ONE HALF;No;0;ON;<fraction> 0031 2044 0032;;;1/2;N;FRACTION ONE HALF;;;;
0041;LATIN CAPITAL LETTER A;Lu;0;L;;;;;N;;;;0061;
0042;LATIN CAPITAL LETTER B;Lu;0;L;;;;;N;;;;0062;
0043;LATIN CAPITAL LETTER C;Lu;0;L;;;;;N;;;;0063;
0044;LATIN CAPITAL LETTER D;Lu;0;L;;;;;N;;;;0064;
0045;LATIN CAPITAL LETTER E;Lu;0;L;;;;;N;;;;0065;
0046;LATIN CAPITAL LETTER F;Lu;0;L;;;;;N;;;;0066;
0047;LATIN CAPITAL LETTER G;Lu;0;L;;;;;N;;;;0067;
0048;LATIN CAPITAL LETTER H;Lu;0;L;;;;;N;;;;0068;
0049;LATIN CAPITAL LETTER I;Lu;0;L;;;;;N;;;;0069;
004A;LATIN CAPITAL LETTER J;Lu;0;L;;;;;N;;;;006A;
004B;LATIN CAPITAL LETTER K;Lu;0;L;;;;;N;;;;006B;
004C;LATIN CAPITAL LETTER L;Lu;0;L;;;;;N;;;;006C;
004D;LATIN CAPITAL LETTER M;Lu;0;L;;;;;N;;;;006D;
004E;LATIN CAPITAL LETTER N;Lu;0;L;;;;;N;;;;006E;
004F;LATIN CAPITAL LETTER O;Lu;0;L;;;;;N;;;;006F;
0050;LATIN CAPITAL LETTER P;Lu;0;L;;;;;N;;;;0070;
0051;LATIN CAPITAL LETTER Q;Lu;0;L;;;;;N;;;;0071;
0052;LATIN CAPITAL LETTER R;Lu;0;L;;;;;N;;;;0072;
0053;LATIN CAPITAL LETTER S;Lu;0;L;;;;;N;;;;0073;
0054;LATIN CAPITAL LETTER T;Lu;0;L;;;;;N;;;;0074;
0055;LATIN CAPITAL LETTER U;Lu;0;L;;;;;N;;;;0075;
0056;LATIN CAPITAL LETTER V;Lu;0;L;;;;;N;;;;0076;
0057;LATIN CAPITAL LETTER W;Lu;0;L;;;;;N;;;;0077;
0058;LATIN CAPITAL LETTER X;Lu;0;L;;;;;N;;;;0078;
0059;LATIN CAPITAL LETTER Y;Lu;0;L;;;;;N;;;;0079;
005A;LATIN CAPITAL LETTER Z;Lu;0;L;;;;;N;;;;007A;
</pre>