HTML onkeydown属性

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

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要素へと伝播していく。

もし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 を返す。

関連記事

class

dir

id

lang

onblur

onchange

onclick

oncontextmenu

ondblclick

onfocus

onkeypress

onkeyup

onmousedown

onmousemove

onmouseout

onmouseover

onmouseup

onselect

style

title

参考文献

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

World Wide Web Consortium (2021) UI Events