Implement keyboard control in JavaScript Grid

Question

I finished building a JavaScript grid control, end everything works fine. Paging, button navigation, column sorting, etc.

The cells in the grid are DIVs which are generated using Mootools 1.2.4 (which is heavily used throughout the control).

I want to implement keyboard control for the grid, both for paging (page up/page down) and for moving with arrow keys inside the rows/cells of the grid. I think that I have to attach an event handler on each cell of the grid and detect what key is being pressed in order to take an appropriate action. But, I can't set the focus on the cells.

What am I missing? How do I do this? Any help is appreciated.

Answer 1

there's a possible hack you can do by adding tabindex to the non-form elements, it will allow you form events like focus, blur and listeners

here's an example: http://www.jsfiddle.net/htgZ4/

not sure how cross browser it is.

$$("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();