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

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

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

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

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


javascript keyboard mootools
person Vanco    schedule 16.04.2010    source источник
comment
Когда вы говорите, что я не могу установить фокус на ячейках. Вы имеете в виду, что не знаете, как это сделать, или что вы пытались, и у вас возникли проблемы с этим. Если последнее, пожалуйста, включите код, чтобы продемонстрировать проблему.   -  person MisterMister    schedule 17.04.2010
comment
@MisterMister: document.id('cell_1_1').focus() ничего не делает. Если я прикреплю событие «keydown» к div с идентификатором «cell_1_1», оно не сработает.   -  person Vanco    schedule 17.04.2010

Ответы (1)


arrow_upward
1
arrow_downward

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

вот пример: 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();
person Dimitar Christoff    schedule 18.04.2010
comment
Я вижу сейчас. Добавление tabindex было решением. Я думаю, что я могу сделать эту работу. Спасибо большое. Действительно ценю это. - person Vanco; 18.04.2010