Question

我需要构建一个Google Suggest样式下拉框，但遗憾的是由于各种许可限制，我无法使用jQuery或Prototype。几乎我唯一可以使用的是公共领域的东西，我可以修改，不需要将其他人的所有权归于。

无论如何，我可以很好地处理AJAX和服务器端脚本。我遇到的问题是如何使Javascript响应键盘事件：

当用户点击向下箭头键时，选择列表中的下一个项目
选择并在选中[Enter]
点击[Esc]
等。等等。

思考？实例

Answer 1

不完全符合您的要求，但可能会引起您的兴趣。 A fancy Apple.com-style search suggestion using jQuery

Answer 2

您可以使用此代码附加/分离事件（与IE和W3C事件模型兼容，因此应在所有浏览器中使用）：

events = {

    addEvent: function(obj, e, handler) {
        if (!obj._attachedEvents)
            obj._attachedEvents = new Array();
        if (obj._attachedEvents[e])
            this.removeEvent(obj, e);
        obj._attachedEvents[e] = handler;

        if (obj.addEventListener) 
            obj.addEventListener(e, handler, false);
        else if (obj.attachEvent) 
            obj.attachEvent('on' + e, handler);
    },

    removeEvent: function(obj, e) {
        if (!obj._attachedEvents || !obj._attachedEvents[e])
            return;

        if (obj.removeEventListener) 
            obj.removeEventListener(e, obj._attachedEvents[e], false);
        else if (obj.detachEvent) 
            obj.detachEvent('on' + e, obj._attachedEvents[e]);
        obj._attachedEvents[e] = null;
    },

    cancelEvent: function(e) {
        e = e || window.event;

        if(e.preventDefault)
            e.preventDefault();
        if(e.stopPropagation) 
            e.stopPropagation(); 
        e.cancelBubble = true;
        e.returnValue = false;
        return false;
    },

    getTarget: function(e) {
        return e.srcElement || e.target;
    }
};

然后在处理程序中，您可以看到按下了哪个键，并执行您想要的任何操作。

希望它有所帮助，安德烈

Answer 3

看看js-hotkeys。我在很多项目中都使用过这个库。它适用于所有A级浏览器，允许您捕获关键事件，并且许可证非常宽松。

构建一个Google Suggest框并在没有jQuery的情况下响应键盘事件

3 个答案: