Как использовать события клавиатуры javascript для веб-интерфейса

Question

Меня интересует использование событий JS, таких как стрелка вправо \ влево, пробел и т. Д. Хотите знать, как правильно это сделать. Я хотел бы показывать фотографии, показывать DIV и т. Д. При таких взаимодействиях пользователей.

Я подумал о возможных реализациях с jQuery, таких как http://api.jquery.com/event.which/ Хотя я не уверен, что это лучший способ.

Вот два хороших примера для таких реализаций пользовательского интерфейса. (Как они это делают?) http://www.thesixtyone.com; http://www.pictorymag.com/showcases/summer-jobless

Я скорее парень вроде c #, ищу правильное направление, чтобы покопаться. Спасибо.

Answer 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;
    }
});