javascript - 模拟 Google 键盘快捷键

Question

我真的很好奇 Google（以及现在照片库中的 Facebook）如何实现快捷键，例如J/K或←/→箭头。恐怕我没有太多细节，因为我无法通过检查源代码来确定是哪一块使这些按钮“抽动”，可以这么说。我特别寻找的是一种将按钮绑定到 Javascript 函数的方法——从那里开始，这显然相当容易。

Answer 1

在最基本的情况下，您只需注册一个 keydown 事件处理程序（如果您希望它对页面是全局的，则在文档对象上）然后查看事件对象以查看按下了哪个键。

由于不同的浏览器以不同的方式处理事件（我正在查看 Internet Explorer），因此我通常使用 YUI 或 jQuery 等抽象层来规范化差异。

YUI 有一个和jQuery一样实现键盘控制的例子（虽然这个例子没有附加到文档对象上）。

如果您想找出哪些键码与哪些键相关，那么我发现使用Firebug最容易。

在控制台中运行以下代码：

document.onkeydown = function (ev) { console.log(ev); }

…然后点击页面并按键。打印到控制台的对象将告诉您刚刚触发的键码。

Answer 2

我建议使用js-hotkeys（jQuery插件）。

我之前在生产环境中使用过这个插件，所以在实现它之前我在所有 a 级浏览器上对其进行了测试。这大约是三个月前的事了。