JSでKeyboard Eventを拾う

女子小学生じゃないですよ．

いろいろやってるうちにだんだん訳がわからなくなってきました．

[keyevent.js]
function EventLog(str){
    document.getElementById("eventlog").childNodes[1].innerHTML += "<br />" + str;
}

function DebugFlag(){
    this.single_mkey = false;
    return this;
}

document.onkeydown = function(e){
    var shift, ctrl, alt, keycode, keychar;
    var debug = DebugFlag();

    if (e != null) {
        keycode = e.which;
        if(typeof e.modifiers == "undefined"){
            shift = e.shiftKey;
            ctrl = e.ctrlKey;
            alt = e.altKey;
        }else{
            shift = e.modifiers & Event.SHIFT_MASK;
            ctrl = e.modifiers & Event.CONTROL_MASK;
            alt = e.modifiers & Event.ALT_MASK;
        }
        e.stopPropagation();
        e.preventDefault();

    }else{
        keycode = event.keyCode;
        shift = event.shiftKey;
        ctrl = event.ctrlKey;
        alt = event.altKey;
        event.cancelBubble = true;
        event.returnValue = false;
    } 
    keychar = String.fromCharCode(keycode).toUpperCase();

    if(debug.single_mkey == true){
        if(shift){
            EventLog("shift");
        }else if(ctrl){
            EventLog("ctrl");
        }else if(alt){
            EventLog("alt");
        }else{
            EventLog(keychar);
        }
    }else{
        if(shift){
            if(keychar.match(/\w{1}/i)){ EventLog("Shift + " + keychar); }
        }else if(ctrl){
            if(keychar.match(/\w{1}/i)){ EventLog("Ctrl + " + keychar); }
        }else if(alt){
            if(keychar.match(/\w{1}/i)){ EventLog("Alt + " + keychar); }
        }else{
            EventLog(keychar);
        }
    }
}

[keyevent.html]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/DTD/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="keyevent.js"></script>
<title>Key Event</title>
<div>
<p id="eventlog">Event Log</p>
</div>

まぁ，EventLog()が頭悪いとかこのコード自体動けば良かったのでつっこみどころたくさんあると思いますが生ぬるい目でスルーしてください．

これでFirefoxならちゃんとid:eventlogに押したキーが記録されます．Firefoxなら．

というのも，主要3ブラウザのFirefox, Opera, IEでことごとく実装が違うので挙動も変わってきます．IE6だとエラー出て全く記録されず，OperaだとAltが普通にブラウザのショートカットキーとして働いてしまう．ここら辺の差異をなくすためにさらに調べなきゃなりません．また後日．

CapturingとかBubblingって関係あるのかな？これ．