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

Question

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

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

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

$(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要覆盖的按键.即使没有默认行为,您也需要防止它们级联,以防用户反弹其默认键盘快捷键.

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

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

编辑添加:

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