Реализовать управление с клавиатуры в JavaScript Grid

Question

Я закончил создание элемента управления сетки JavaScript, конец все работает нормально. Пейджинг, навигация по кнопкам, сортировка столбцов и т. Д.

Ячейками в сетке являются DIV, которые генерируются с помощью Mootools 1.2.4 (который интенсивно используется в контроле).

Я хочу реализовать управление клавиатурой для сетки, как для подкачки (страница вверх / страница вниз), так и для перемещения с помощью клавиш со стрелками внутри строк / ячеек сетки. Я думаю, что мне нужно прикрепить обработчик событий к каждой ячейке сетки и определить, какая клавиша нажата, чтобы предпринять соответствующее действие. Но я не могу сосредоточиться на клетках.

Чего мне не хватает? Как мне это сделать? Любая помощь приветствуется.

Answer 1

есть возможный хак, который вы можете сделать, добавив tabindex к элементам, не относящимся к форме, это позволит вам формировать такие события, как focus, blur и listeners

вот пример: http://www.jsfiddle.net/htgZ4/

не уверен, насколько это кросс-браузер.

$$("div").each(function(el, i) {
    el.set("tabindex", i).addEvents({
        focus: function() {
            this.addClass("focused");
        },
        blur: function() {
            this.removeClass("focused");
        },
        keydown: function() {
            this.addClass("editing");
            console.log("down");
        },
        keyup: function() {
            this.removeClass("editing");
        }
    });
});

$$("div").getRandom().focus();