单个字符到单词的列表，例如 / 是“斜杠”或“正斜杠”

Question

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.

Answer 1

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>