javascript - 捕获 Web 应用程序所有关键事件的最佳方式？

Question

我对 Web 应用程序的 key 捕获的当前状态感到有点心烦意乱。只要您知道您的用户将在特定位置(例如 input 字段)输入，它就可以很好地工作，但是一旦您想为整个“应用程序”执行全局快捷方式，它似乎分崩离析。

我正在尝试找出是否有比我当前使用的方法更好的方法来捕获网页的所有关键事件。

我目前的方法是使用 JQuery Hotkeys插件，绑定(bind)到 document 元素，即:

$(document).bind("keyup", "delete", function() {});

这对大多数用途都很有效，但例如在 Firefox 上，如果用户不小心将鼠标移到导航栏上，删除键有时会导致用户“返回”，并且永远不会收到该键通过处理程序，以便我可以停止传播。

是否有我应该绑定(bind)的不同元素？有没有更好的插件？我是否应该避免使用任何与普通网络浏览器中的事物绑定(bind)的键？

随着越来越多的 Web 应用程序希望模仿其桌面应用程序，这似乎是 Web 开发人员越来越需要的一项基本功能。

编辑: 我应该指出，我已经在使用 e.stopPropagation() 和 e.preventDefault()。主要问题似乎是有时事件甚至从未传递给绑定(bind)函数。我基本上想知道是否有人想出一个“更高”的元素来绑定(bind)到 document 以外的元素。还是有我从未想过的替代方案？例如，在页面上嵌入一个不可见的 Flash 元素，然后将所有键从该元素传递给 JavaScript(我认为这行不通)。

我认为，在这一点上，我正在以“标准的、众所周知的方式”做事。我正在尝试查看是否有一种不广为人知的开箱即用方式，也许 Stack Overflow 上的某个人知道 :-)。

Answer 1

如果您正在制作一个带有自定义键盘控件的复杂网络应用程序，您应该做的第一件事就是提醒用户您正在制作一个带有自定义键盘控件的复杂网络应用程序。之后，告诉他们控件是什么以及它们的作用。

将 keypress 和 keydown 监听器绑定(bind)到 document 是正确的做法，但你必须记住 preventDefault 和/或 stopPropogation 用于您要覆盖的按键。即使没有默认行为，您也需要防止它们级联，以防用户恢复默认键盘快捷键。

此外，您将只能在页面获得焦点时接收键盘输入。

当您说 Delete 时，我假设您指的是 Backspace 键，因为 Delete 通常指的是 Insert 、Home、End、Page Up 和 Page Down。

编辑添加:

要非常小心选择覆盖哪些键。如果您制作的应用程序供您以外的人使用，则必须担心可用性和可访问性。覆盖 Tab、Space 和 Enter 键是有风险的，尤其是对于使用屏幕阅读器的人。确保盲目测试网站并解决通过键盘遍历页面时可能出现的任何问题。