자바스크립트 단축키 사용 [Key Binding]

자바스크립트 단축키 사용 [Key Binding]

Scripter/JAVASCRIPT 2008/08/19 10:20

가끔씩 Ajax 웹어플리케이션을 만들다 보면 단축키를 요구하는 고객들이 많다.
그러한 이유로 단축키 관련 스크립트를 찾아보던중에 prototype el.observe() (extjs에서는 el.on())를 이용한 keycode를 바인딩해주는
스크립트를 찾았다.

얼마전에 ajaxian post에 올라왔던 글이였는데 잊고 있었던거.. ㅡ.,ㅡ;
잠시 꼬불쳐 두다... 키값 참조할때도 좋겠다.

참조URL , 샘플URL

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/scriptaculous.js"></script>
<script type="text/javascript" >
var Key = {

// -- Alphabet
A: 65,
B: 66,
C: 67,
D: 68,
E: 69,
F: 70,
G: 71,
H: 72,
I: 73,
J: 74,
K: 75,
L: 76,
M: 77,
N: 78,
O: 79,
P: 80,
Q: 81,
R: 82,
S: 83,
T: 84,
U: 85,
V: 86,
W: 87,
X: 88,
Y: 89,
Z: 90,

a: 97,
b: 98,
c: 99,
d: 100,
e: 101,
f: 102,
g: 103,
h: 104,
i: 105,
j: 106,
k: 107,
l: 108,
m: 109,
n: 110,
o: 111,
p: 112,
q: 113,
r: 114,
s: 115,
t: 116,
u: 117,
v: 118,
w: 119,
x: 120,
y: 121,
z: 122,

// -- Special Keys
BACKSPACE: 8,
TAB: 9,
ENTER: 13,
ESCAPE: 27,
END: 35,
HOME: 36,
ARROW_LEFT: 37,
ARROW_UP: 38,
ARROW_RIGHT: 39,
ARROW_DOWN: 40,
DELETE: 46,
QUESTION_MARK: 63

};

/*
* Tie into ? and ESCAPE
*/
document.onkeypress = function(e) {
if (e.charCode == Key.QUESTION_MARK) {
KeyBindingsHUD.toggle();
} else if (e.keyCode == Key.ESCAPE) {
KeyBindingsHUD.hide();
} else {
KeyBindings.actionForKey(e);
}
}

var KeyBindings = (function() {
var bindings = {};

var findNumber = function(key) { // get the name of the key from the charCode
for (var name in Key) {
if (Key[name] == key) {
return name;
}
}
}

return {
add: function(binding) {
if (typeof binding.keys == "string") { // short circuit for non-arrays
binding.keys = [ binding.keys ];
}
bindings[binding.eventname] = binding;
},

remove: function(eventname) {
bindings[eventname] = undefined;
},

html: function() {
var html = [];

for (var key in bindings) {
if (bindings.hasOwnProperty(key)) {
var binding = bindings[key];
var keys = binding.keys.collect(function(key) {
return Object.isNumber(key) ? findNumber(key) : key;
});
html.push(keys.join(', ') + ': ' + binding.description);
}
}

return html.join('<br/>');
},

actionForKey: function(e) {
for (var action in bindings) {
if (bindings.hasOwnProperty(action)) {
var keys = bindings[action].keys;
keys.each(function(key) {
if (e.charCode == 0) {
if (e.keyCode == key) {
document.fire(action, e);
throw $break;
}
}
if (String.fromCharCode(e.charCode) == key) {
document.fire(action, e);
throw $break;
}
});
}
}
},

caseInsensitive: function(keys) {
if (typeof keys == "string") keys = [ keys ]; // array wrap
var newArray = [];
keys.each(function(c) {
newArray.push(c, c.toUpperCase());
});
return newArray;
}
}
})();

/*
*
*/
var KeyBindingsHUD = (function() {
var isShown = false;
var headerId = '_keybindings_header';

return {
toggle: function() {
(isShown) ? this.hide() : this.show();
},
show: function() {
if (!isShown) {
var header = $(headerId);
if (!header) {
header = this.createElement();
}
header.innerHTML = KeyBindings.html();
header.blindDown({duration: 0.2});
isShown = true;
}
},
hide: function() {
if (isShown) {
$(headerId).blindUp({duration: 0.2});
isShown = false;
}
},
createElement: function() {
var header = document.createElement('div');
header.id = headerId;
header.align = 'center';
header.style.display = 'none';
header.style.width = '100%';
header.style.backgroundColor = '#111111';
header.style.color = '#eeeeee';
header.style.fontSize = '10pt';
header.style.paddingTop = '4px';
header.style.paddingBottom = '4px';
header.style.borderBottom = '1px solid #333';

var body = document.body;
body.insertBefore(header, body.firstChild);

return $(headerId);
}
}
})();




KeyBindings.add({
eventname: 'action:move-up',
keys: ['p', Key.ARROW_UP ],
description: "Move up the stack"
});

KeyBindings.add({
eventname: 'action:move-down',
keys: ['n', Key.ARROW_DOWN ],
description: "Move down the stack"
});

document.observe('action:move-up', function(e) {
alert(1)
});

document.observe('action:move-down', function(e) {
alert(2);
});

</script>

**************************************

F5키를 막는 방법은 아래와 같습니다.

마우스 오른쪽 클릭으로 새로고침하는 것을 방지

* 메뉴와 도구모음에서 새로고침하는 것은 원천적으로는 막을 수 없습니다. (물론 없애버릴 수는 있다지만...)

소스다운로드 :

test.html

keys.js

keybindings.js

JsonML 활용하기 (0)	2008/11/12
CSS & JAVASCRIPT 최적화 도구 (0)	2008/10/26
자바스크립트 단축키 사용 [Key Binding] (0)	2008/08/19
자바스크립트 최적화(반복문) (0)	2008/07/30
자바스크립트 코딩가이드 #1 (0)	2008/07/02
getBoundingClientRect in FF3 (1)	2008/06/25