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和/或{{1}对于要覆盖的按键。即使没有默认行为，您也需要防止它们级联，以防用户重新弹出默认键盘快捷键。

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

当你说删除我假设你的意思是 Backspace 键为删除通常引用 Insert ，主页，结束， Page Up 和 Page Down 。

编辑添加：

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

Answer 2

也许您可以使用html-attribute 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'元素。

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

4 个答案: