キーボードイベント
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//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; } .wordbox { width: 150px; font-size: 40px; border: #4C4C4C solid 1px; text-align: center; padding: 20px; margin: 20px; } #disparea{ background-content: #CCCCCC; } #result{} </style> <script language="javascript" type="text/javascript"> var q_keycode; function tmp(e){} function playGame(e){ var in_keycode = e.keyCode; if(q_keycode == undefined || in_keycode == 13){ q_keycode = Math.floor(Math.random()*26)+65; document.getElementById('disparea').childNodes[0].nodeValue = String.fromCharCode(q_keycode); document.getElementById('result').childNodes[0].nodeValue = ''; } else { if(in_keycode == q_keycode){ document.getElementById('result').childNodes[0].nodeValue = '正解'; } else { document.getElementById('result').childNodes[0].nodeValue = 'はずれ'; } } } function setListeners(e){ addListener(document, 'keydown', 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; } } addListener(window,'load',setListeners,false); </script> </head> <body> <!-- 問題表示領域 --> <div>質問</div> <div id="disparea" class="wordbox">?</div> <!-- 結果表示領域 --> <div>結果</div> <div id="result" class="wordbox">Press any key.</div> </body> </html>
ポイント
String.fromCharCode(キーコード) でキーコードを文字列に変換している。