HTML onkeyup属性の使い方

HTMLタグのonkeyup属性には、キーを離したときに実行するJavaScriptを記述する。マウスのクリック動作でkeyupイベントは発生しない。

onkeyup

構文

<tag onkeyup="javascript">

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

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

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

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

HTML

テキスト入力フィールド内でキーを押した後にキーを離すと、onkeyup属性に指定した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:

要素

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

バブリング

keyupイベントはバブリング(下位の要素から上位の要素へ伝播)する。

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

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

keyupイベント

keyupのイベントオブジェクトは KeyboardEvent インタフェースを通じてアクセスできる。

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

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

イベントリスナー

onkeyup属性を使わずに、イベントリスナーを使ってイベント処理を行うこともできます。

<button type="button" id="btn">
  Button
</button>
<p>
  Event: <span id="evnt"></span>
</p>
<script>
  e = document.getElementById("btn");
  e.addEventListener("keydown", function(){
    document.getElementById("evnt").innerHTML = "keydown";
  });
  e.addEventListener("keyup", function(){
    document.getElementById("evnt").innerHTML = "keyup";
  });
</script>

Event:

関連記事

class

dir

id

lang

onblur

onchange

onclick

oncontextmenu

ondblclick

onfocus

onkeydown

onkeypress

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