當我們在寫工具系統時，與一般Web網站最大的差異在於，這是一種專家系統，需要較高的操作效率，因此採用鍵盤操作取代滑鼠會是更好的選擇。
在以往，運用 Javascript 寫鍵盤操作功能時，我們需要很麻煩的去記錄每個鍵盤按鍵的編號，例如 enter 是 13 ，Tab 鍵是 9 ，然後再用 event.keyCode 來判斷，例如：
function (event) {
if( event.keyCode == 13 ) {
// Enter pressed
// Do something
}
}
即便最方便的 jQuery 也是用類似的方法來判別按鍵：
$('#input').on('keydown',function(event){
console.log(event.which) // 等於 event.keycode
}
不過如果我們用的是 moootools 就方便多啦。
mootools 的 Element.Event 提供清楚易懂的按鍵名稱字串供我們判斷，如下圖，我們只要呼叫 if( event.key == 'enter' ) 就可以判斷是否為 Enter：
要測試很簡單，在載入 mootools 的環境下，從 Chrome 開發者工具的 Console 輸入
window.addEvent('keydown', function(event){ console.log(event) });
之後在頁面上按任何按鍵，Console 就會跳出事件資訊讓你查看。
現在我提供一些範例寫法，用在寫組合快速鍵非常方便，當然這些都只是臨時性的寫法，有心者可以自行延伸成一個完整的物件。
範例一：在頁面上判斷上下左右按鍵
window.addEvent('keydown', function(event){
switch(event.key) {
case 'up' :
// Do something
break;
case 'down' :
// Do something
break;
case 'left' :
// Do something
break;
case 'right' :
// Do something
break;
case 'enter' :
// Do something
break;
}
});
範例二：在頁面上判斷組合按鍵並跳轉頁面
當按下 Ctrl + Q 等等按鍵組合後，跳轉到相對應的頁面，按下 Ctrl + Enter 後則送出表單。
window.addEvent('keydown', function(event){
// 沒有按住 Ctrl 則不動作
if( !event.control ) return ;
var uri ;
switch(event.key) {
case 'q' :
uri = '...' ;
break;
case 'w' :
uri = '...' ;
break;
case 'e' :
uri = '...' ;
break;
case 'r' :
uri = '...' ;
break;
case 'enter' :
$$('#adminForm').submit();
return;
break;
}
if(uri) {
location.href = uri ;
}
});
當然 Shift 與 Alt 都是可以判斷的，屆此可以做出媲美桌面應用的的按鍵組合。
範例三：在日期表單判斷上下鍵，用來控制日期前進或後退
$$('input#date-input').getFirst().addEvent('keydown', function(event){
// 取得 Date 處理物件，塞入 input 的現有 value
// this 就是 input 自己
var date = new Date(this.get('value'));
// 如果有按 shift ，日期以月份為單位來前進後退，否則就以日為單位
var unit ;
if(event.shift) {
unit = 'month' ;
}else{
unit = 'day' ;
}
// 為了避免按「下」時出現自動完成選項，把此功能關閉
this.set('autocomplete', 'off' );
// 開始做按鍵判斷
switch(event.key) {
case 'up' :
date.increment(unit, 1); // 日期 +1 單位
this.set('value', date.format('%Y-%m-%d')); // 輸出成字串並插入回 input
break;
case 'down' :
date.decrement(unit, 1); // 日期 -1 單位
this.set('value', date.format('%Y-%m-%d')); // 輸出成字串並插入回 input
break;
}
});
要注意的是這些範例中用的都是 onKeydown 事件，而如果你有需要阻止原本按鍵的功能，只有 onKeypress 事件可以 preventDefault 。
延伸參考：
Javascript Char Codes (Key Codes)
JavaScript Event KeyCode 自動測試與偵測
jQuery.hotkey 可以直接寫 ctrl+s 也蠻方便的：
$(document).bind('keydown', 'ctrl+s', function(event) {
console.log(event);
return false;
});
