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

Question

对于Web应用程序的关键捕获当前状态，我感到非常愤怒。 只要您知道您的用户将要在特定位置（例如input字段）中键入内容，它就会很有效，但只要您想要为整个“应用程序”执行全局快捷方式，它就会崩溃。

我试图找出是否有更好的方法来捕获网页的所有关键事件，而不是我目前使用的方法。

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

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

这对于大多数用途都很有用，但是例如在Firefox上，如果用户碰巧心不在焉地将鼠标移到导航栏上，则删除键有时会导致用户“返回”，并且处理程序从未接收到密钥这样我就可以停止传播了。

我应该绑定一个不同的元素吗？ 那里有更好的插件吗？ 我应该避免使用常见Web浏览器中绑定的任何键吗？

随着越来越多的Web应用程序看起来模仿他们的桌面版本，这似乎是Web开发人员越来越需要的基本功能。

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

我认为，在这一点上，我做的事情是“标准的，众所周知的方式”。 我试图看看是否存在一种尚未被广泛知晓的开箱即用的方式，也许有人在SO上知道:-)。

Answer 1

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

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

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

当你说删除我假设你的意思是退格键，因为删除通常是指插入 ， 主页 ， 结束 ， 向上翻页和向下 翻页旁边的键。

编辑添加：

要非常小心你选择覆盖哪些键。 如果您要将应用程序供自己以外的人使用，则必须担心可用性和可访问性。 覆盖Tab ， Space和Enter键是有风险的，特别是对于使用屏幕阅读器的人。 确保测试网站盲点并修复通过键盘遍历页面可能出现的任何问题。

Answer 2

也许你可以使用html属性ACCESSKEY并对onfocus做出反应。 即：

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

我想你可能需要在像<div>这样的标签上添加一个tabindex

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

Answer 3

您无法绑定到无法控制的事件 - 例如窗口镶边。 大多数webapps处理此问题的方式是要求用户使用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

绝对没有经过测试但是......试试'window'元素。