如何在 Web UI 中使用 Javascript 键盘事件

Posted 2023-02-22

【中文标题】如何在 Web UI 中使用 Javascript 键盘事件

【英文标题】：How to use Javascript keyboard events for web UI

【发布时间】：2011-05-08 01:16:37

【问题描述】：

我对使用 JS 事件感兴趣，例如右/左箭头、空格键等。 想知道什么是正确的方法。我想在此类用户交互中滑动照片、显示 DIV 等。

我想到了使用 jQuery 的可能实现，例如 http://api.jquery.com/event.which/ 虽然我不确定这是最好的方法。

以下是此类 UI 实现的两个很好的示例 （他们是怎么做到的呢？） http://www.thesixtyone.com ;http://www.pictorymag.com/showcases/summer-jobless

我更像是一个 C# 人，正在寻找正确的方向。

【参考方案1】：

如果您已经在使用或计划使用 jQuery，那么利用 which 并不是一个坏主意。如果您查看示例，它会向您展示如何执行此操作。将光标放在那里的文本字段中，然后按您感兴趣的键，即左箭头。 keydown: 中显示的数字是您要查找的代码。

现在，当您编写自己的函数时，您可以将keydown 绑定到document 并监听正确的键。从那里，您可以根据按下的键调度某些行为。

$(document).bind('keydown', function (e) 
    var code = e.which;
    switch (code) 
        case 39:
            // code to execute when right arrow is pressed
            some_right_arrow_action();
            break;
        case 37:
            // code to execute when left arrow is pressed
            some_left_arrow_action();
            break;
    
    return;
);

您询问了 Pictorymag.com 等网站如何处理此功能。这是 Pictorymag.com 所做的（我已经解压缩了他们的代码以使其更易于阅读）：

$(document).keydown(function (e) 
    switch(e.keyCode) 
        case 39:
        case 74:
            node = s[++curr];
            if(node) 
                $.scrollTo(node,800);
             else 
                curr = s.length-1;
            
            break;
        case 37:
        case 75:
            node = s[--curr];
            if (node) 
                $.scrollTo(node, 800);
             else 
                curr=0;
            
            break;
    
);

【讨论】：

这正是我认为可以用 jQuery 实现的方式，如他们的示例所示。在我作为实现示例提供的两个站点中，我没有发现任何相似之处，因此我认为可能有不同的、更合适的方法。知道他们是怎么做的吗？谢谢！

PictoryMag.com 基本上使用了我发布的内容：$(document).keydown(function(e)switch(e.keyCode)case 39:case 74:node=s[++curr];if(node)$.scrollTo(node,800); elsecurr=s.length-1; break;case 37:case 75:node=s[--curr];if(node)$.scrollTo(node,800); elsecurr=0; break;);

TheSixtyOne.com 对他们的代码进行了一些混淆，并且他们使用面向对象的方法，所以我不能在这里发布任何简洁的内容，但如果你想尝试工作，代码就在这里出来：thesixtyone.com/site_media/javascripts/thesixtyone.v16041.js

太好了，谢谢。我会那样做。您在 PictoryMag.com 代码中的何处找到它？有没有办法从混淆的 TheSixtyOne 代码中阅读\理解一些东西？

PictoryMag.com 的代码在这里：static.mypictory.com/static/CACHE/js/ecb5cdac854f.js