test.html 1.62 KB
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>イベントサンプル</title>

<style type="text/css">
body {
    font-family: Arial;
}
</style>

<script language="javascript" type="text/javascript">

function playGame(e) {
    // 押されたキーのキーコードを取得する
    var in_keycode = e.keyCode;
    var in_charcode = e.charCode;
    // 問題表示領域に、アルファベットを表示
    document.getElementById('key').childNodes[0].nodeValue = in_keycode;
    document.getElementById('char').childNodes[0].nodeValue = in_charcode;
}

// keydownイベントリスナーをセットする
function setListeners(e) {
    // キーが押されたらplayGame()関数が実行されるようリスナーをセット
    addListener(document, 'keypress', playGame, false);
}

function addListener(elem, eventType, func, cap) {
    if(elem.addEventListener) {
        elem.addEventListener(eventType, func, cap);
    } else if(elem.attachEvent) {
        elem.attachEvent('on' + eventType, func);
    } else {
        alert('ご利用のブラウザーはサポートされていません。');
        return false;
    }
}

// HTMLがロードされた際に、setListeners()関数を実行させる
addListener(window, 'load', setListeners, false);

</script>

</head>

<body>

  <div>charCode : <span id="char">N/A</span></div>
  <div>keyCode : <span id="key">N/A</span></div>

</body>
</html>