【问题标题】:List of single character to word, such as / is "slash" or "forward slash"单个字符到单词的列表,例如 / 是“斜杠”或“正斜杠”
【发布时间】:2022-01-25 07:37:48
【问题描述】:

在 JavaScript 中,你可以通过查看event.code 来获取被按下的键的单词定义,例如:

document.onkeypress = function(event) {
  console.log(event.code);
};

当我按a 时,我得到KeyA。当我按向上箭头键时,我得到ArrowUp。这对于大多数键来说都很好,但是,当我在丹麦布局的键盘上按下像 ½ 这样的键时,我得到 Backquote,这是不正确的。

我没有获取 JavaScript 给我的硬编码值,而是考虑转换 event.key,它返回按键的实际值。例如,如果我在键盘上按 SHIFT + 7event.key 将返回 /,我希望将其称为 slash(或 forward slash) .

有没有办法将字符转换为实际单词?我想要一个像这样的对象/字典:

const keys = {
    '/': 'forward slash', //or slash
    'a': 'a',
    'space': 'Space',
    '"': 'Quotation mark',
    '\'': 'Apostrophe'
};

等等。然后我可以这样做:

document.onkeypress = function(event) {
  const characterPressed = keys[event.key];

  console.log(characterPressed);
};

是否有一个列表我可以遍历以获取每个值,或者我是否必须遍历每个可能在键盘上键入的字符,然后手动映射它们?我基本上是在寻找“字符到单词的定义”方案。

【问题讨论】:

  • 这能回答你的问题吗? Finding Unicode character name with Javascript
  • @RickyMo 好的,所以有一个 unicode 字符列表,但它看起来并不那么漂亮。例如,Backquote(取自 JavaScript)不存在。此外,不完全确定如何将½ 转换为任何有用的东西。你能澄清一下吗?
  • string.charCodeAt() 为您提供 unicode 值。例如,"½".charCodeAt(0) 为您提供189,即十六进制的00BD。然后你可以从文本文件中找到"00BD;",它给你“FRACTION ONE HALF”。您甚至可以预解析文件以构建易于搜索的数据库。
  • @RickyMo 嗯,好吧,不幸的是,输出不会那么漂亮。如果我希望它对最终用户来说“漂亮”,我猜我必须手动完成这一切。丹麦键盘上的æ 字符LATIN SMALL LETTER A E 不是那么漂亮哈哈。我想我可以指定它应该查看哪些字符范围。感谢您的回复。

标签: javascript keyboard-events


【解决方案1】:

使用 cmets 中提到的 unicode data list 您的问题,这可能是一种检索字符名称的方法(sn-ps 包含提到列表的一小部分):

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>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2012-05-17
    • 1970-01-01
    • 2023-03-16
    • 2019-09-03
    • 1970-01-01
    • 2013-11-14
    • 1970-01-01
    • 2015-07-14
    相关资源
    最近更新 更多