prog*sig

単一のイベントで複数のショートカットキーイベント - jimo/memo

http://d.hatena.ne.jp/jimo1001/20090601/1243782686

元ネタではCtrl+Deleteなどが使用できなかったのでちょっと修正。
動いてるのかは微妙

var ShortcutKey = function() {
	this.list = [];
	this.init();
}
ShortcutKey.prototype.keys = {
	8: 'BS',
	10: 'RET',
	13: 'RET',
	32: 'SPC',
	9: 'TAB',
	27: 'ESC',
	33: 'PageUp',
	34: 'PageDown',
	35: 'End',
	36: 'Home',
	37: 'Left',
	38: 'Up',
	39: 'Right',
	40: 'Down',
	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'
}
ShortcutKey.prototype.skeys = {
	8: 'BS',
	10: 'RET',
	13: 'RET',
	32: 'SPC'
}
ShortcutKey.prototype.mkeys = {
	'altKey' : 'A',
	'ctrlKey' : 'C',
	'metaKey' : 'M',
	'shiftKey' : 'S'
}
ShortcutKey.prototype.init = function() {
	var self = this;
	window.addEventListener('keydown', function(evt) {
		var key = self.get(evt);
		self.list.forEach(function(a) {
			if (a.key == key && (a.element == evt.target || a.element == evt.view)){
// 				console.log(a.key +"=="+ key);
				a.func();
			}
		});
	}, false);
}
ShortcutKey.prototype.add = function(elm, key, func) {
	this.list.push(
		{
			'element' : elm,
			'key' : key,
			'func' : func
		}
	);
}
ShortcutKey.prototype.get = function(evt) {
	var key = [], k = '';
	for (mk in this.mkeys) {
		if(evt[mk])
			key.push(this.mkeys[mk]);
	}
	if (evt.which){
		k = this.keys[evt.which] || String.fromCharCode(evt.which).toLowerCase();
		key.push(key.length ? '-'+k : k);
	}else if (evt.keyCode){
		k = this.keys[evt.keyCode];
		key.push(key.length ? '-'+k : k);
	}
	return key.join("");
}
var shortcut = new ShortcutKey();
GM_config.init('Configuration for search filter',{
	defaultTag:    { label: 'Pre text:', type: 'text' , default: 'Now browsing: ' },
	isSelection:  { label:'Use selection', type: 'checkbox', default: true },
	ShortURL: { label:'Short URL', type:'select', options: {'http://is.gd/api.php?longurl=' : 'is.gd','http://tinyurl.com/api-create.php?url=': ' tinyurl.com','http://tweetburner.com/links' : 'tweetburner.com'}, default: 'is.gd' },
	ShortCutKey:    { label: 'ShortcutKey:', type: 'text' , default: 'CS+return' },
	TwitterUserName: { section: ['Twitter'],label: 'Twitter Username:', type: 'text' , default: 'azu_re' },
	TwitterPassword: { label: 'Twitter Password :', type: 'text' , default: '' },
},  "#config_header {font-size:16pt !important;} .config_var {margin:5px 0 5px 20% !important;} #header {margin-bottom:30px !important;} .indent40 {margin-left:20% !important;}" , // to add your CSS - replace this with configStyle
	{
		open: function() {
			var iframe = document.getElementById("GM_config");
			iframe.contentDocument.getElementById("field_ShortCutKey").addEventListener('keydown', function(evt) {
				evt.preventDefault();
				this.value = shortcut.get(evt);
			},false);
    },
		save: function() {

		} // reload the page when configuration was changed
});

使うとき

var shortcut = new ShortcutKey();
shortcut.add(window, 'C-a', function() {
    alert('test');
});
shortcut.add($('IF4L_input'), 'd', function() {
    alert('test2');
});
// ショートカットキーを表示するインプットエリア
var inputTag = document.createElement("input");
inputTag.addEventListener('keydown', function(evt) {
				evt.preventDefault();
				this.value = shortcut.get(evt);
			},false);