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

Question

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

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

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

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

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

我应该绑定其他元素吗？有没有更好的插件呢？我应该避免使用任何绑定到普通网络浏览器中的键吗？

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

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

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

Answer 1

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

将keypress 和keydown 侦听器绑定到document 是正确的方法，但是对于要覆盖的按键，您必须记住preventDefault 和/或stopPropogation。即使没有默认行为，您也需要防止它们级联，以防用户反弹其默认键盘快捷键。

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

当您说 Delete 我假设您的意思是 Backspace 键，因为 Delete 通常指的是 Insert 旁边的键kbd>、Home、End、Page Up和Page Down。

编辑添加：

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

Answer 2

也许您可以使用 html-attribute ACCESSKEY 并对焦点做出反应。 即：

<input type="text" size="40" value="somefield" accesskey="F">

我想你可能需要在标签中添加一个 tabindex，比如<div>

<div id="foo" tabindex="1" accesskey="F">

Answer 3

您无法绑定到发生在您无法控制的事件上 - 例如。窗口镀铬。大多数 webapp 处理这个问题的方式是要求用户确认他们离开页面的决定，使用 onbeforeunload 事件：

window.onbeforeunload = function (e) {
    var str = 'Are you sure you want to leave this page?';
    e = e || window.event;

    if (userHasSomeUnsavedWork) {
        e.returnValue = str;
        return str;
    }
}

• onbeforeunload - MDC

Answer 4

绝对未经测试，但是...在“窗口”元素上尝试一下。