在JavaScript Grid中实现键盘控制

Question

我完成了构建JavaScript网格控件，结束一切正常。分页，按钮导航，列排序等

网格中的单元格是使用Mootools 1.2.4（在整个控件中大量使用）生成的DIV。

我想为网格实现键盘控制，包括分页（向上翻页/向下翻页）以及在网格的行/单元格内使用箭头键移动。 我认为我必须在网格的每个单元格上附加一个事件处理程序，并检测正在按下的键以采取适当的操作。但是，我不能把重点放在细胞上。

我错过了什么？我该怎么做呢？任何帮助表示赞赏。

Answer 1

你可以通过向非表单元素添加tabindex来实现hack，它可以让你形成焦点，模糊和听众等事件

这是一个例子：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();