HTML の onkeyup 属性

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

構文

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

html
- body
  - form
    - fieldset
      - input

もし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: