HTML onkeydown属性

キーを押したときに実行するスクリプトを記述します。onkeydown属性は省略可能です。

onkeydown — Figure 1. onkeydown

HTML

HTMLでキーダウンのイベントハンドラを指定する。

<tag onkeydown="javascript">

onkeydown属性で関数を呼び出す場合、第1引数にイベント・オブジェクトを渡すことができる。

<tag onkeydown="func(arguments[0])">

onkeydown属性で関数を呼び出す場合、第2引数にエレメント・オブジェクトを渡すことができる。

<tag onkeydown="func(arguments[0], this)">

JavaScript

JavaScriptでキーダウンのイベントハンドラを指定する。

object.onkeydown = function(){ script };

object.addEventListener("keydown", script);

jQuery

jQueryでキーダウンのイベントハンドラを指定する。

window.jQuery(expr).on("keydown", function([event]){ script });

jQuery(expr).on("keydown", function([event]){ script });

$(expr).on("keydown", function([event]){ script });

使用例

テキスト入力フィールド内でキーを押した後にキーを離すと、onkeydown属性に指定したJavaScriptが実行されるサンプルを次に示す。

<fieldset onkeydown="keyDown('fieldset')" onkeyup="keyUp('fieldset')">
  <input type="text" onkeydown="keyDown('input')" onkeyup="keyUp('input')">
</fieldset>
<p>input: <span id="input"></span></p>
<p>fieldset: <span id="fieldset"></span></p>
<script>
  function keyDown(id) {
    document.getElementById(id).innerHTML = "keydown";
  }
  function keyUp(id) {
    document.getElementById(id).innerHTML = "keyup";
  }
</script>

サンプル

input:

fieldset:

要素

次に示すイベント・ハンドラ・コンテンツ属性は、任意のHTML要素に指定することができる。

バブリング

keydownイベントはバブリング（下位の要素から上位の要素へ伝播）する。

HTMLが次に示す構造である場合、input要素で発生したkeydownイベントは、fieldset、form、body及びhtml要素へと伝播していく。

html
- body
  - form
    - fieldset
      - input

もしfieldset、form、body及びhtml要素にonkeydown属性を指定した場合、それらのJavaScriptも実行される。

キャンセル

keydownイベントはキャンセル可能である。

keydownイベントをキャンセルすると、デフォルト動作が行われなくなる。

インタフェース

keydownイベントは KeyboardEventインタフェースを実装している。

KeyboardEventインタフェースは次に示すプロパティを持つ。

key: キー属性値
code: 押されている物理キーを識別するための文字列
location: デバイス上のキーの論理的な位置
ctrlkey: コントロールキー修飾子がアクティブであった場合、true を返す。
shiftkey: シフトキー修飾子が有効であった場合、true を返す。
altkey: Alt又はOptionキー修飾子が有効であった場合、true を返す。
metakey: Meta又はCommandキー修飾子が有効であった場合、true を返す。
repeat: キーが持続的に押された場合、true を返す。
isComposing: キーイベントが合成セッションの一部として発生した場合、true を返す。

関連記事

参考文献

Web Hypertext Application Technology Working Group (2022) "Web application APIs" HTML Living Standard

World Wide Web Consortium (2021) UI Events