S_a_k_Uの日記みたいなDB

~サクゥーと呼ばないで~

ファンクションキーでイベント処理

CUIベースのシステムのリニューアルには、ありがちな話の対応方法。
例えば、F3を押すと検索のダイアログが出てきたりするような動作を抑止する必要がある。
この時のキーコードを検出するHTMLに、その対応を追加してみた。
変更点は
1)「getWindowEvent().keyCode = 0」によりキーコードをリセットする【IEのみ】
2)各functionでfalseをリターンして、inputタグの各イベントを中止する
3)bodyタグのonHelpイベントを中止する【IEでのF1キーの対応】
動作はIE7とFirefox3.0.8で確認した。
また、2)の対応により、IE7ではonkeypressのイベントが実行されなくなる。


■参考サイト
ファンクションキーを無効にする方法



但し、全ての要素のイベントで書かないと(挙動が同じでないと)意味がないような気がする。

<HTML>
<head>
<script type="text/javascript">

var kcd = null;

function doKeyDown() {
    kcd = getWindowEvent().keyCode;
    document.getElementById("keyDownKeyCode").value = getWindowEvent().keyCode;
    document.getElementById("keyDownCharCode").value = getWindowEvent().charCode;
    var ret = true;
    if ((kcd >= 112) && (kcd <= 123)) {
        ret = false;
        if (isIe() == true) {
            getWindowEvent().keyCode = 0;
        }
    }
    return ret;
}


function doKeyPress() {
    kcd = getWindowEvent().keyCode;
    document.getElementById("keyPressKeyCode").value = getWindowEvent().keyCode;
    document.getElementById("keyPressCharCode").value = getWindowEvent().charCode;
    var ret = true;
    if ((kcd >= 112) && (kcd <= 123)) {
        ret = false;
        if (isIe() == true) {
            getWindowEvent().keyCode = 0;
        }
    }
    return ret;
}


function doKeyUp() {
    kcd = getWindowEvent().keyCode;
    document.getElementById("keyUpKeyCode").value = getWindowEvent().keyCode;
    document.getElementById("keyUpCharCode").value = getWindowEvent().charCode;
    var ret = true;
    if ((kcd >= 112) && (kcd <= 123)) {
        ret = false;
        if (isIe() == true) {
            getWindowEvent().keyCode = 0;
        }
    }
    return ret;
}


function isIe() {
    if (document.all) {
        return true;
    }
    return false;
}


/*
  イベントを取得する
*/
function getWindowEvent() {

    if (window.event) {
        return window.event;
    }
    
    var caller = arguments.callee.caller;
    while (caller) {
        var ob = caller.arguments[0];
        if (ob) {
            if ((ob.constructor == KeyboardEvent) || (ob.constructor == MouseEvent)) {
                return ob;
            }
        }
        caller = caller.caller;
    }
    
    return null;
    
}


</script>
</head>
<body onHelp="return false;">
ここでキー入力 <input type="text" id="keyCode" onkeydown="return doKeyDown();" onkeypress="return doKeyPress();" onkeyup="return doKeyUp();" size="50" /><br />
【keyCode】<br />
<table>
<tr>
<td>
onkeydown
</td>
<td>
<input type="text" readonly id="keyDownKeyCode" size="5" /><br />
</td>
</tr>
<tr>
<td>
onkeypress
</td>
<td>
<input type="text" readonly id="keyPressKeyCode" size="5" /><br />
</td>
</tr>
<tr>
<td>
onkeyup
</td>
<td>
<input type="text" readonly id="keyUpKeyCode" size="5" /><br />
</td>
</tr>
</table>
【charCode】<br />
<table>
<tr>
<td>
onkeydown
</td>
<td>
<input type="text" readonly id="keyDownCharCode" size="5" /><br />
</td>
</tr>
<tr>
<td>
onkeypress
</td>
<td>
<input type="text" readonly id="keyPressCharCode" size="5" /><br />
</td>
</tr>
<tr>
<td>
onkeyup
</td>
<td>
<input type="text" readonly id="keyUpCharCode" size="5" /><br />
</td>
</tr>
</table>
</body>
</HTML>