キー入力を検知させる

赤字: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には押されたキーに対応するコード番号が入ります。

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

戻る