代码之家 › 专栏 › 技术社区 › Keith Palmer Jr.

构建一个Google建议框并在不使用jQuery的情况下响应键盘事件

keyboard events javascript

Keith Palmer Jr. · 技术社区 · 16 年前

我需要构建一个Google建议风格下拉框,但不幸的是,由于各种许可限制,我无法使用jQuery或Prototype。几乎我唯一能使用的东西是公共领域的东西,我可以修改,不需要把别人的所有权归属。

无论如何,我可以很好地处理AJAX和服务器端脚本。我陷入困境的是如何让Javascript响应键盘事件:

当用户按下向下箭头键时,选择列表中的下一项
单击[输入]时,选择并用所选项目填充文本框
按[Esc]时关闭建议框
等等等等。

3 回复 | 直到 16 年前

Shoban 16 年前

不完全是你在找什么,但可能有兴趣。 A fancy Apple.com-style search suggestion using jQuery .

Andrey 16 年前

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;
    }
};

然后在处理程序中,您可以看到按下了什么键,并根据需要执行任何操作。

安德烈