捕获Web应用程序的所有关键事件的最佳方法？ [英] Best way to capture all key events for a web application?

问题描述

我对当前Web应用程序的关键捕获状态感到愤怒。只要你知道你的用户打算在某个特定的地方打字（例如 input 字段），只要你想做全局快捷键一整个应用程序，它似乎分崩离析。

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

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

  $（文档）.bind（keyup，delete，function（）{}）; 
  

这对大多数用途都很有用，但例如在Firefox上，如果用户不情愿地移动他们的鼠标移动到导航栏上时，删除键有时会导致用户返回，并且处理程序永远不会收到该键，以便我可以停止传播。

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

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

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

我认为，在这一点，我正在做的事情是标准，知名的方式。我试图看看是否有一种外界不知道的方式，可能是有人知道： - ）。

解决方案

如果您正在制作具有自定义键盘控件的复杂网页应用程序，您应该做的第一件事是提醒用户您正在制作具有自定义键盘控件的复杂网页应用程序。之后，告诉他们控件是什么以及他们做了什么。 绑定按键和 keydown 侦听器到文档是正确的方法，但您必须记住 preventDefault 和/或 stopPropogation 您想要覆盖的按键。即使没有默认行为，您也需要防止它们在用户重新启动其默认键盘快捷键时级联。

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

当您说删除时，我假设您的意思是 Backspace 删除通常引用插入，主页，结束，页面和 Page Down 。

编辑即可添加：

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

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 input field), but as soon as you want to do global shortcuts for an entire "application", it seems to fall apart.

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

My current method is to use the JQuery Hotkeys plugin, bound to the document element, i.e.:

$(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.

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?

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.

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).

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 :-).

解决方案

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 them what the controls are and what they do.

Binding the keypress and keydown listeners to the document is the correct way to do it, but you have to remember to preventDefault and/or stopPropogation for 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.

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

When you say Delete I assume you mean the Backspace key as Delete generally referrs to the key next to Insert, Home, End, Page Up and Page Down.

Edit to add:

Be very careful about 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, Space and Enter keys 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.

这篇关于捕获Web应用程序的所有关键事件的最佳方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！