为什么键盘快捷方式不适用于非美国布局以及DEDS如何解决它

在过去的15个月中，我一直在思考键盘快捷键以及如何处理它们的方式。我不应该抱怨;当我开始构建keycombiner时，我知道我进入了什么，一个用于学习和查找快捷方式和文本片段的应用程序。尽管如此，我不太了解网络上的混乱键盘快捷键处理。

你使用国际键盘布局吗？然后你已经知道我在说什么。您可能已经有一些问题键入键盘快捷键，例如Alt + /，或cmd + [。这篇文章将帮助您理解为什么存在这种烦恼。但是，应该急于阅读这篇文章的人是Web开发人员。你是一个web开发人员吗？伟大的！我将解释您目前如何放下非美国用户以及如何让我们摆脱这种混乱。

我正在谈论的问题是如此令人难以置信的全天候，大多数国际用户都习惯于他们无法在其键盘上键入给定的Web应用程序的键盘快捷键的良好部分。但是，Web应用程序正在变得越来越复杂，并且他们正在迅速更换桌面应用程序，这在一天中更大的问题。

当最重要的键盘快捷键无法访问时，这是最烦人的。非常常见的快捷方式/用于访问搜索功能。不幸的是，大多数国际布局都没有/ key。添加修饰符以使用您的布局为生产此键很少有帮助。例如，在我的德语布局上，通过Shift + 7.大多数Web应用程序都会忽略这一点。相似性疼痛是当电子应用程序使用[和]来向后和向前导航。

如果您使用美国布局，可能会听到这些问题。但是放心，他们不是新的，我不是唯一一个受影响的人。我们是一个很容易找到为几乎任何流行的Web应用程序抱怨的用户。

一个有趣的例子是谷歌的应用程序。出于某种原因，Google管理在Gmail中正确地处理国际布局，但在其其他任何应用程序中无法执行此操作。网络充满了投诉，例如抱怨对于Google纸张，Google Drive和Google文档。

另一个，几乎有趣的检查是Figma，流行的基于Web的矢量图形编辑器。很多人抱怨说，现在有一个专门的网站，用于不同的布局。

ASANA论坛的投诉也很有趣。他们对某些布局进行了一些具体的调整，只能放弃最终并说他们仍然不支持更加异国情调的布局。

还有很多投诉的概念，在这里或这里看到。但竞争没有更好的事情，这是漫游研究的开放问题。

我想清楚，破碎的键盘捷径不是自然的法律。可以实现Web应用程序快捷方式，以便它们可以用任何布局键入。它不应该是一个借口，即使是一些最受欢迎的应用程序也不是正确的。

对我来说，我的问题存在于数百万人们每天使用的应用中，由巨大的公司开发，他们自豪地拥有世界上最好的工程师。为什么这令人困惑？因为潜在的技术问题相当琐碎！

Web应用程序使用JavaScript处理键盘快捷键。为此，每当按下键时，他们会收听浏览器发出的键盘事件。那就是它变得有点凌乱的地方。这些键盘事件具有多个属性，可用于标识已按下的键。要使最重要的事情更糟糕，三个不同的事件与单个按钮相关联：keydown键盘键盘。大多数应用程序使用JavaScript库来处理所有这些东西，主要是hotkeys.js或mousetrap。让我们来看看热键。事项是什么：

它使用keycode，thatedcode，以找出按下的键。为什么这是个问题？对于初学者，弃用了所有三个属性。虽然甚至不是主要问题。这些事件属性根本不适合查找在使用键盘或keyup使用时按下的按下了哪个字符。仍然绝大多数Web应用程序使用这些属性的keydown evente.it非常清楚地记录了这一点，这不应该跨布局，操作系统甚至浏览器兼容。引用MDN Web Docs：

在处理键盘和键盘事件时，Web开发人员不应使用Keycode属性进行可打印字符。如上所述，KeyCode属性对于可打印字符并不有用，尤其是那些用换档或ALT键的输入。在实现快捷键处理程序时，按键事件通常更好。

使用Chrome与Linux与德国键盘，我的＃键将生成触发/快捷方式所需的键槽。但是，这在Firefox上不起作用，也没有在麦斯卡斯的Chrome上工作。通过许多浏览器和操作系统组合，无法在德语布局上触发此快捷方式。对于没有专用/ -Key的许多其他国际键盘布局也是如此。

如果您想查看哪个按钮生成哪个事件属性，可以使用此整洁的小型Web工具：https://w3c.github.io/uevents/tools/key-event-viewer.html提示：切换计算机的计算机键盘布局除了我们以外的东西，可以调试应用程序的快捷方式处理不同的布局。

使用此事件查看器，您将看到KeyPress事件通常会在任何布局上生成正确的代码。不幸的是，这一事件作为一个整体弃用，并具有自己的问题。仍然，捕鼠库可以在国际布局上使用相当好的结果。

正如你所看到的，情况很乱。然而，开发人员通常很擅长处理复杂的问题。在下一节中，我将指出一些比谷歌和其他科技巨人更好的方式。

好消息是这个问题很容易修复。根据您的资源和应用程序的技术和语义要求，您可以做一些事情：

如果您的Web应用程序没有大量的快捷方式，或者如果您没有资源在此问题上花费有意义的工程工作，那么这里有一些琐碎的方法可以解决所描述的问题。

不要为键盘快捷方式使用特殊字符。这就是你需要做的就是让99％的国际用户开心。如果您想进一步逐步，您可以尝试留在主排或选择否则易于键入的字符。如果您拥有具有无法更改的快捷方式的现有应用程序，因为您的美国用户已经了解到它们，请考虑以下建议。

提供替代方案如果您真的需要使用特殊字符，请提供可以在所有键盘布局上键入的替代方案。在创建绑定时，Hotkeys.js和mousetrap都支持多个触发器。例如，如果您有/正如您的快捷方式，因为您的用户习惯于习惯此行为，请将Alt + S添加为国际用户的替代方案。有些美国用户可能会欢迎这种变化，因为Alt + S可以刚刚左手键入，而何时可以播放人们掌握鼠标。

实际上使快捷方式与任何键盘布局一起工作。这意味着当德国布局用户按ALT + Shift + 7时应触发快捷键时，应触发快捷方式。这是一些流行的快捷方式处理库令人惊讶的是。通过捕鼠器，您需要做的就是收听按键事件而不是键盘。在这篇文章的下一部分中，我将提及一些工作的应用程序。这个方法有一个小幅下行。它可以使一些乏味繁琐地输入一些布局，例如，输入一些布局。需要两种或三种修饰符。它还具有捷径冲突的可能性。 Ctrl + /突然与Ctrl + Shift + 70相同。您应该了解它，而不是将这些东西分配给两个不同的绑定。避免这种冲突的最简单方法是在定义绑定时远离移位修改。

如果您想一路走，您可以编写自己的快捷方式处理代码，并可能进入一个开源库。目前的替代方案不关心支持不同的布局。有很多事情可以解决，解决本文中描述的所有问题。例如，您可以使用关键属性，甚至可以使用实验keyboard.getLayoutMap API。 keycombiner使用此API与用户的布局，以显示其屏幕虚拟键盘，我认为自己正在制作这样的库。 keycombiner已经使用了已经定制了一点的捕鼠器的叉子。但是，我已经有一个苛刻的全职工作和一个大的侧面项目，所以如果你打败了我，我会很高兴。

允许用户更改默认密钥绑定。这样，国际键盘布局的用户可以将无效绑定更改为适用于它们的东西。作为一个奖金，您将使任何快乐的爱好者快乐，您的营销人员可以指出所有遗憾 - 屁股竞争对手如何不允许自定义键盘快捷键。

有趣的是，我不知道一个Web应用程序，允许您自定义键盘快捷键，即使实现难以实现，尤其是使用现代SPA必须只能从数据库中拉一次自定义绑定。您可以将它们存储在数据库中，将用户登录时将其拉出，并将其传递给快捷方式处理库。

幸运的是，一些应用程序已经对了。三个应用程序，我使用的是我的德国布局完美无瑕的是Gmail，线性和话语。

很难相信Gmail由与Google Drive，Google Chat和许多不正确地处理国际布局上的快捷方式的其他应用程序创建的Gmail。 Gmail Web界面非常适用于我测试的所有布局。在我的德语布局上，我甚至可以使用Altgr + 8来归档对话（[）。类似地，可以通过Shift + 7（/）触发搜索。请注意，这是所有其他Google Apps不起作用的完全相同的快捷方式。因此，如果您在谷歌工作，也许在Gmail团队中询问您的同事有点帮助。

话语是一个很好的例子，因为它是一个开源应用程序，这意味着您可以转到他们的github存储库，看看它们是如何做的。答案非常简单：他们使用带有按键的捕鼠库。如上所述，即使与按键使用时，keycode / charcode将包含正确的代码。

线性是一个相对较新且越来越受欢迎的问题跟踪软件。它具有键盘首先设计，并以广泛的键盘快捷键优化效率优化。他们最近的成功故事和我的个人经历表明他们履行了这一承诺。当然，许多其他Web应用程序也有很多键盘快捷键。然而，用线性，他们实际上是工作。

您是否知道使用所有键盘布局的其他应用程序？请告诉我在下面的评论中，我会在这里添加它们。

下次使用一个应用程序在您面前悬挂其键盘快捷键定义的应用程序，就可以发现它们不使用布局，请记住这篇文章。您会知道有方法可以解决这个问题。

如果您处于心情，您可以为开发人员编写一个很好的信息，解释它们可能滥用keydown事件及其键代码属性。我们不应该这样生活。

评论由Disqus提供动力