--- title: GlobalEventHandlers.onkeyup slug: Web/API/GlobalEventHandlers/onkeyup tags: - API - Event Handler - GlobalEventHandlers - HTML DOM - Property - Reference translation_of: Web/API/GlobalEventHandlers/onkeyup ---
{{ApiRef("HTML DOM")}}

{{domxref("GlobalEventHandlers")}} ミックスインの onkeyup プロパティは、{{event("onkeyup")}} イベントを処理する {{event("Event_handlers", "event handler")}} です。

keyup イベントは、ユーザーが押していたキーを離した時に発生します。

構文

target.onkeyup = functionRef;

値

functionRef は関数名または 関数式 です。この関数は、{{domxref("KeyboardEvent")}} オブジェクトとその 1 個の引数を受け取ります。

例

この例は、{{HtmlElement("input")}} 要素内でキーを離すたびに、そのキーの {{domxref("KeyboardEvent.code")}} 値をログ出力します。

HTML

<input>
<p id="log"></p>

JavaScript

const input = document.querySelector('input');
const log = document.getElementById('log');

input.onkeyup = logKey;

function logKey(e) {
  log.textContent += ` ${e.code}`;
}

実行結果

{{EmbedLiveSample("Example")}}

仕様

仕様書 策定状況 備考
{{SpecName('HTML WHATWG','webappapis.html#handler-onkeyup','onkeyup')}} {{Spec2('HTML WHATWG')}}

ブラウザー実装状況

{{Compat("api.GlobalEventHandlers.onkeyup")}}

互換性ノート

Firefox 65 以降、keyup および keydown イベントは、CJKT (中国、日本、韓国、台湾) ユーザーのブラウザー間の互換性を改善するために、IME 変換中に発生するようになりました (詳細は {{bug(354358)}} および IME 変換中にも keydown、keyup イベントが発生するようになりました を参照)。変換対象の一部に対してすべての keydown イベントを無視するには、次のようにしてください (229 は IME により処理されるイベントに関する keyCode の特別な値セットです):

eventTarget.addEventListener("keyup", event => {
  if (event.isComposing || event.keyCode === 229) {
    return;
  }
  // do something
});

関連項目