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

Best way to capture all key events for a web application?

提问by Riley Dutton

I'm a litle distraught at the current state of key capturing for web applications. It works great as long as you know your user is going to be typing in a specific place (e.g. an inputfield), but as soon as you want to do global shortcuts for an entire "application", it seems to fall apart.

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

I'm trying to find out if there is a better way to capture allthe key events for a web page than the method I am currently using.

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

My current method is to use the JQuery Hotkeysplugin, bound to the documentelement, i.e.:

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

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

That works great for most purposes, but for example on Firefox, if the user happens to absentmindedly move their mouse over the navigation bar, the delete key will sometimes result in the user going "back", and the key is never received by the handler so that I can stop propagation.

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

Is there a different element I should be binding to? Is there a better plugin out there for this? Should I just avoid using any keys that are bound to things in common web browsers?

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

As more and more web applications look to mimic their desktop counterparts, it seems like this is a basic feature that web developers will increasingly require.

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

EDIT:I should point out that I am already using e.stopPropagation()and e.preventDefault(). The main problem seems to be that sometimes the event is never even passed to the bound function. I am basically wondering if anyone has figured out a "higher" element to bind to other than document. Or is there an alternative I have never even thought of? Embedding an invisible Flash element on the page and then passing all keys from that to Javascript, for example (I don't think this would work).

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

I think, at this point, I am doing things the "standard, well-known way." I am trying to see if there is an outside-the-box way that isn't widely known that maybe someone on SO knows about :-).

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

采纳答案by zzzzBov

If you are making a sophisticated web-app with customized keyboard controls, the first thing you should do is alert the user that you are making a sophisticated web-app with customized keyboard controls. After that, tell themwhat the controls are and what they do.

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

Binding the keypressand keydownlisteners to the documentis the correct way to do it, but you have to remember to preventDefaultand/or stopPropogationfor keypresses that you want to override. Even if there is no default behavior, you will need to prevent them from cascading in case the user has rebound their default keyboard shortcuts.

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

Also, you will only be able to receive keyboard input when the page has focus.

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

When you say DeleteI assume you mean the Backspacekey as Deletegenerally referrs to the key next to Insert, Home, End, Page Upand Page Down.

当你说Delete我想你指的是Backspace关键作为Delete一般referrs到关键旁边Insert，Home，End，Page Up和Page Down。

Edit to add:

编辑添加：

Be very carefulabout which keys you choose to override. If you're making an app to be used by people other than yourself, you have to worry about usability and accessibility. Overriding the Tab, Spaceand Enterkeys is risky, especially for people using screen-readers. Make sure to test the site blind and fix any issues that may arise with traversing the page via the keyboard.

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

回答by helle

maybe you can use html-attribute ACCESSKEYand react onfocus. i.e.:

也许你可以使用 html-attributeACCESSKEY并对 onfocus 做出反应。IE：

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

i think u might need to add a tabindex to tags like <div>

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

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

回答by Andy E

You can't bind to events that happen where you have no control - e.g. the window chrome. The way most webapps deal with this is asking the user to confirm their decision to leave the page, using the onbeforeunloadevent:

您无法绑定到在您无法控制的情况下发生的事件 - 例如窗口镶边。大多数网络应用程序处理这个问题的方式是要求用户使用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

• onbeforeunload - MDC

回答by dgnin

Absolutly non-tested but... try it on 'window' element.

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