キーマップでキー設定したい
何か試す時に、なんかのキーを押したらテストするようにしようかと思ったんだけど、まずイベントが複雑すぎて毎回、キーコードを確認して合わせないといけないので、それは流石に嫌な感じがして、適当にキーマップにしてみた。が、やり方がよく分からなかったのでかなり適当。何かprototypeっていうのでやった方がいいのかもしれないけど、試したらエラーがでまくったので、適当に諦めてそのまま毎回キーマップを作る事に。キーマップ作るほどじゃない時はcharNameで適当に合わせればいいことに。関数の名前はxyzzy風味にしておいた。
var keymap = { map : {}, }; keymap.defineKey = function(keyName,func){ this.map[keyName.toLowerCase()] = func; }; keymap.FuncKeyName = { 8:"backspace", 9:"tab", 13:"return", 19:"pause", 27:"escape", 32:"space", 33:"pageup", 34:"pagedown", 35:"end", 36:"home", 37:"left", 38:"up", 39:"right", 40:"down", 44:"printscreen", 45:"insert", 46:"delete", 112:"f1", 113:"f2", 114:"f3", 115:"f4", 116:"f5", 117:"f6", 118:"f7", 119:"f8", 120:"f9", 121:"f10", 122:"f11", 123:"f12", 144:"numlock", 145:"scrolllock" }; keymap.graphicKeyName = { 48:"0", 49:"1", 50:"2", 51:"3", 52:"4", 53:"5", 54:"6", 55:"7", 56:"8", 57:"9", 59:";", 61:"=", 65:"a", 66:"b", 67:"c", 68:"d", 69:"e", 70:"f", 71:"g", 72:"h", 73:"i", 74:"j", 75:"k", 76:"l", 77:"m", 78:"n", 79:"o", 80:"p", 81:"q", 82:"r", 83:"s", 84:"t", 85:"u", 86:"v", 87:"w", 88:"x", 89:"y", 90:"z", 107:"+", 109:"-", 110:".", 188:",", 190:".", 191:"/", 192:"`", 219:"[", 220:"\\", 221:"]", 222:"\"" }; keymap.charName = function (evt){ var keyName = null; var mod = ''; var kCode = evt.keyCode; keyName = keymap.FuncKeyName[kCode]; if(!keyName && keymap.graphicKeyName[kCode]) keyName = keymap.graphicKeyName[kCode]; if(keyName){ if(evt.ctrlKey) mod += 'c_'; if(evt.altKey) mod += 'm_'; if(evt.shiftKey) mod += 's_'; return mod + keyName ; } }; keymap.handle = function(evt){ if(evt.type == 'keydown'){ var keyName = keymap.charName(evt); if(typeof keymap.map[keyName] == "function"){ var func = keymap.map[keyName]; func(); if (evt.preventDefault) { evt.preventDefault(); } else { evt.returnValue = false; } if (evt.stopPropagation) { evt.stopPropagation(); } else { evt.cancelBubble = true } } } };
キーの名前とかはオライリーのページのサンプルコードで、そっくりのキーマップのがあったので、それに合わせておいた。っていうか、向こうの奴のがキーマップも賢そうだったので、それを使った方がいいのかもしれないけど、難しくて少し意味が分からなかったので自分が分かる奴でいい事にした。っていうか、頑張って折角作ったのに変えるのが嫌だったとも言うけど。
兎も角、これを自分が前に作っていた検索用のグリモンに組み込んでキーバインドを設定しやすいようにしてみた。ちょっと問題も在るけど自分的にはイッパイイッパイの出来なのでよしとした。
■適当な追記
defineKeyの所でモディファイアの順番を気にしなくていいように検索して入れ替えとかしたらいいかもしれない。
if(keyName.match(/^([cms]_){2,3}/i)){ var key = keyName.match(/[^_]*$/i) , mod = ''; if(keyName.match(/c_/i)) mod = keyName.match(/c_/i); if(keyName.match(/m_/i)) mod += keyName.match(/m_/i); if(keyName.match(/s_/i)) mod += keyName.match(/s_/i); keyName = mod + key; alert(keyName); }
こんなのとか、でいんだろうか・・・。正規表現は置換とかでやればなんかもっと上手くできそうだけど、よく分からないので適当で。