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

2021-04-09 05:02:39

在过去的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提供动力