キー入力を検知させる

赤字：JavaScriptの命令や重要なタグ／青字：用途に応じて変更する部分／緑字：変更可能な変数名やユーザー関数名

戻る

実例

例文

<input type="text" id="f_text" value="ここに入力" size="40" onKeyDown="keyInput(ev)"> //*1
<span id="text_code"></span>

<script type="text/javascript">
//キー入力の検知
function keyInput(event) { //*2
	var key_event = event || window.event; //*3
	var key_shift = (key_event.shiftKey); //*4
	var key_ctrl = (key_event.ctrlKey);
	var key_alt = (key_event.altKey);
	var key_meta = (key_event.metaKey);
	var key_any = key_event.keyCode; //*5
	//キーに対応した処理
	var s = "";
	if (key_shift) s += "shiftキー ";
	if (key_ctrl) s += "ctrlキー ";
	if (key_alt) s += "altキー ";
	if (key_meta) s += "metaキー ";
	//出力
	document.getElementById("text_code").innerHTML = s + "Code=" + key_any;
}
</script>

解説

フォームの左のフィールドに文字を入力すると、右のフィールドに対応するキーのコード番号が表示されます。

(*1)フィールド内でキーボードのキーを押すとonKeyDownイベントが発生し、変数eventでキー入力の状態が伝えられます。
(*2)変数eventでキー入力のイベントを受け取ります。（Firefox用）
(*3)Internet Explorerでは「window.event」を使うため、変数key_eventにFirefox用かIE用のどちらかある方のイベントを取得させます。
(*4)変数key_shiftにshiftキーの状態を代入します。押されていたらtrue、そうでなければfalseです。
検知したいキーがctrlキーの場合は「ctrlKey」、Windowsのaltキー（MacOSではoptionキー）なら「altKey」、MacOSのcommandキーは「metaKey」です。
(*5)変数key_anyには押されたキーに対応するコード番号が入ります。

後は、キーの状態に応じた処理を記述します。

戻る