キーイベントのメモ

javascript

IEとFirefoxのキー入力時の振る舞いが結構違うので少し調べてみた。

?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>イベントをトレース</title>
<script language="javascript" type="text/javascript" src="../js/prototype.js" ></script>
<script language="javascript" type="text/javascript" ><!--

function logEvent( observingEventType,  useCapture, event ) {
    var s = "";
    s += " expectedType=" + observingEventType;
    s += " actualType=" + event.type;
    s += " useCapture=" + useCapture;
    s += " ";
    s += " keyCode=" + event.keyCode;
    s += " charCode=" + event.charCode;
    s += " which=" + event.which;
    var logArea = $("logArea");
    logArea.value = logArea.value + "\n" + s;
}

function attachEvent(field, observingEventType, useCapture) {
    Event.observe(field, observingEventType, function(event) {
        logEvent(observingEventType, useCapture, event);
    }, useCapture);
}

window.onload = function() {
    var observed = $("observed");
    attachEvent(observed, "keydown", true);
    attachEvent(observed, "keydown", false);
    attachEvent(observed, "keypress", true);
    attachEvent(observed, "keypress", false);
    attachEvent(observed, "keyup", true);
    attachEvent(observed, "keyup", false);
}

--></script>
</head>
<body>
    <form id="f">
        <label for="observed">入力フィールド</label><input type="text" id="observed"/>
    </form>
    <label for="logArea">ログ</label><br/>
    <textarea id="logArea" cols="120" rows="20"></textarea>
</body>
</html>

このHTMLの入力フィールドに"a"と入力してみると、Firefoxでは、

 expectedType=keydown actualType=keydown useCapture=true  keyCode=65 charCode=0 which=65
 expectedType=keydown actualType=keydown useCapture=false  keyCode=65 charCode=0 which=65
 expectedType=keypress actualType=keypress useCapture=true  keyCode=0 charCode=97 which=97
 expectedType=keypress actualType=keypress useCapture=false  keyCode=0 charCode=97 which=97
 expectedType=keyup actualType=keyup useCapture=true  keyCode=65 charCode=0 which=65
 expectedType=keyup actualType=keyup useCapture=false  keyCode=65 charCode=0 which=65

IEでは

 expectedType=keydown actualType=keydown useCapture=false  keyCode=65 charCode=undefined which=undefined
 expectedType=keypress actualType=keydown useCapture=false  keyCode=65 charCode=undefined which=undefined
 expectedType=keypress actualType=keydown useCapture=true  keyCode=65 charCode=undefined which=undefined
 expectedType=keydown actualType=keydown useCapture=true  keyCode=65 charCode=undefined which=undefined
 expectedType=keyup actualType=keyup useCapture=false  keyCode=65 charCode=undefined which=undefined
 expectedType=keyup actualType=keyup useCapture=true  keyCode=65 charCode=undefined which=undefined

keyCodeとかcharCodeとかwhichとかが、あったりなかったりするのは知ってたけど、イベントハンドラの呼び出し順が違っているのはちょっとびっくり。僕の感覚ではFirefoxの方が普通なんだけど。IEの方はkeypressイベントとしてobserveしたのに、event.typeがkeydownのものが渡されているし。うーん、なんだかなー。

こういうのを考慮しないと、特定のキーを受け付けない処理とか書いたときに、変な動作をすることになる・・・っていうか変な動きをしてたから調べました。