键盘事件

sinat_23678421

于 2014-11-25 19:39:13 发布

阅读量326

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/sinat_23678421/article/details/41487823

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

//定义每个键的事件处理程序

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" >
        function Keymap(bindings){
            this.map={};
            if(bindings){
                for(name in bindings) this.bind(name,bindings[name]);
            }
        }
        Keymap.prototype.bind=function(key,func){
            this.map[Keymap.normalize(key)]=func;
        };
        Keymap.normalize=function(keyid){
            keyid=keyid.toLowerCase();
            var words=keyid.split(/\s+|[\-+_]/);
            keyname=words.pop();
            keyname=Keymap.aliases[keyname] || keyname;
            words.sort();
            words.push(keyname);
            return words.join("_");
        };
        Keymap.aliases={
            "escape" : "esc",
            "delete" : "del",
            "return" : "enter",
            "ctrl" : "spacebar",
            "ins" : "insert"
        };
        Keymap.prototype.unbind=function(key){
           delete this.map[Keymap.normalize(key)];
        };
        Keymap.prototype.install=function(element){
            var keymap=this;
            function handler(event){return keymap.dispatch(event,element);}
            if(element.addEventListener) element.addEventListener("keydown",handler,false);
            else if(element.attachEvent) element.attachEvent("onkeydown",handler);

};

        Keymap.prototype.dispatch=function(event,element){
            var modifiers="";
            var keyname=null;

            if(event.altKey) modifiers += "alt_";
            if(event.ctrlKey) modifiers += "ctrl_";
            if(event.metaKey) modifiers +="meta_";
            if(event.shiftKey)modifiers +="shift_";

            if(event.key)
            {
                keyname=event.key;
            }
            else if (event.keyIdentifier && event.keyIdentifier.substring(0,2) !== "U+"){

keyname=event.keyIdentifier;

            }else
            {
                keyname=Keymap.keyCodeToKeyName[event.keyCode];

}

if(!keyname) return ;

            var keyid=modifiers + keyname.toLowerCase();
alert(keyid);
            var handler=this.map[keyid];
            if(handler){
                var retval=handler.call(element,event,keyid);
                if(retval==false){
                    if(event.stopPropagation) event.stopPropagation();
                    else event.cancelBubble=true;
                    if(event.preventDefault)event.preventDefault()
                    else event.returnValue=false;
                }
                return retval;
            }

};

        Keymap.keyCodeToKeyName={
            65:'A',66:'B'
        };
        function load(){

           //以对象形式创建事件对象集合
            var obj={ "a":function(event,keyid){ alert("a:"+keyid); return false;},
            "b":function(event,keyid){alert("b:"+keyid);return false;}};

//创建键盘映射对象
var a=new Keymap(obj);

           //给元素定义事件处理程序
            a.install(document.getElementById("txt"));
        }
    </script>
</head>
<body οnlοad="load()">
<input type="text" id="txt" value="" >
</body>
</html>