在JavaScript网格中实现键盘控制

Question

我完成了一个JavaScript网格控件的构建，一切都很好。分页、按钮导航、列排序等。

网格中的单元格是使用Mootools 1.2.4 (在整个控件中大量使用)生成的DIVs。

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

我遗漏了什么？我该怎么做呢？任何帮助都是非常感谢的。

Answer 1

你可以通过将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();