to site top page

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って関係あるのかな?これ.

can't load my result

前後の記事

最近の記事(5件分)

する事

そのうち記事にするかもリスト

欲しい本