キーボード入力情報の取得

Javascript

Javascriptでのキーボード入力情報の取得について調査してみました。
キーダウンとキープレス時のイベントを捕捉、そのイベント通知オブジェクトからKeyCode,CharCodeなどの値を得るということにより行いました。prototype.jsの1.6を使った以下のようなページを作っておこないました。

<!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" xml:lang="en" lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href="css/table.css">
</style>
    <script type="text/javascript" src="js/prototype.js"></script>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
　  　<script language="JavaScript" type="text/javascript">
<!--
	function checkPressChar(e) {
		$('p-char-code').value = e.charCode;
		$('p-key-code').value = e.keyCode;
		$('p-ctrl').value = e.ctrlKey;
		$('p-shift').value = e.shiftKey;
		$('p-alt').value = e.altKey;
	}
	function checkDownChar(e) {
		$('d-char-code').value = e.charCode;
		$('d-key-code').value = e.keyCode;
		$('d-key-code-mask').value = e.keyCode & 0x7F;
		$('d-ctrl').value = e.ctrlKey;
		$('d-shift').value = e.shiftKey;
		$('d-alt').value = e.altKey;
	}
	document.observe('keypress', checkPressChar);
	document.observe('keydown', checkDownChar);
//-->
　　  </script>
    <title>
    	キー入力の確認
    </title>
   </head>
<body id="body">
<h1>
  	キー入力の確認
</h1>
<div id="main-div">
	<table>
	<tr>
	<td>charcode on press:</td><td> <input id="p-char-code" type="text"/></td>
	</tr>
	<tr>
	<td>keycode on press:</td><td> <input id="p-key-code" type="text"/></td>
	</tr>
	<tr>
	<td>ctrl on press:</td><td> <input id="p-ctrl" type="text"/></td>
	</tr>
	<tr>
	<td>shift on press:</td><td> <input id="p-shift" type="text"/></td>
	</tr>
	<tr>
	<td>alt on press:</td><td> <input id="p-alt" type="text"/></td>
	</tr>
	<tr>
	<td>charcode on down:</td><td> <input id="d-char-code" type="text"/></td>
	</tr>
	<tr>
	<td>keycode on down:</td><td> <input id="d-key-code" type="text"/></td>
	</tr>
	<tr>
	<td>keycode on down(8ビット目mask):
		</td><td> <input id="d-key-code-mask" type="text"/></td>
	</tr>
	<tr>
	<td>ctrl on press:</td><td> <input id="d-ctrl" type="text"/></td>
	</tr>
	<tr>
	<td>shift on press:</td><td> <input id="d-shift" type="text"/></td>
	</tr>
	<tr>
	<td>alt on press:</td><td> <input id="d-alt" type="text"/></td>
	</tr>
	</table>
</div>
</body>

</html>


上記のページをSafari3(Mac), Firefox2/3,IE6でアクセスを行い、イベントオブジェクトに入る値を確認してみました。基本的には以下のように情報が取得できます(記号文字などはややこしいのがありそうですが..)。

キープレス時

いずれのブラウザでもKeyCode属性にプレスしたキーコード値が入る。ただし、shiftキーを同時に押していると8ビット目がオンになるものがあるので、8ビット目オフのマスク(& 0x7F)をしたほうがよさそう。

キーダウン時

入力文字値が入る。文字値なので大文字、小文字の区別がされるなど基本的に表示される文字に対応する値がかえります。またファンクションキー,修飾キー(Ctrlなど),カーソル移動キーなど非文字キーの場合はイベントが発生しないようです。　このイベントでの値の取得に関しては、ブラウザの種類によって違いがあります。

Saferiでは、KeyCodeとCharCode属性で取得できる。
FireFoxでは、CharCodeのみで取得できる。
IE6では、KeyCodeのみで取得できる。

KeyCode、CharCodeいずれをも参照していずれかに入っている値を参照する必要があるということですね..