ZeroPlus Media > Web制作 > JavaScript > 【jQuery】キーボード操作でイベント発火するkeydown/keypress/keyupを解説

【jQuery】キーボード操作でイベント発火するkeydown/keypress/keyupを解説

JavaScript

2022/05/18

2023/05/08

jQueryにはキーボード操作でイベントが発生するkeydown()、keypress()、keyup()の3つのイベントがあります。

様々なイベントを学ぶことで制作の幅が広がるので、知識として身に付けていきましょう！

この記事では「jQueryのkeydown/keypress/keyupイベントの使い方」について解説します。

この記事で身につく内容

jQueryのkeydown/keypress/keyupイベントの使い方

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

keydown()イベント：キーボードのキーが押し込まれるとイベント発火
keypress()イベント：キーボードのキーが押されたときイベント発火
keyup()イベント：押し込まれたキーボードのキーが上がったときイベント発火
keydown/keypress/keyupでは、keydownが最も発火が早い。
まとめ

keydown()イベント：キーボードのキーが押し込まれるとイベント発火

jQueryのkeydownイベントは、jQueryのイベントの一つです。keydown()はキーボードのキーが押し込まれたときイベントが発火します。

基本書式

$("フォーム要素").keydown(function(){
  // ここに処理の内容を記述する
});

上の書式にコードを当てはめると次のようになります。

<input type="text" placeholder="テキストを入力する">
<p>keydown:<span class="keydown"></span></p>

$("input").keydown(function (e) {
  const key = e.keyCode;
  $(".keydown").text(key);
});

出力結果

フォームにテキストを入力すると、キーコードを取得し、textメソッドでキーコードを出力するイベントが発火します。

キーコードは以下のような値になります。

キーコード参考ページ

keypress()イベント：キーボードのキーが押されたときイベント発火

jQueryのkeypressイベントは、jQueryのイベントの一つです。keypress()はキーボードのキーが押されたときイベントが発火します。

基本書式

$("フォーム要素").keypress(function(){
  // ここに処理の内容を記述する
});

上の書式にコードを当てはめると次のようになります。

<input type="text" placeholder="テキストを入力する">
<p>keypress:<span class="keypress"></span></p>

$("input").keypress(function (e) {
  const key = e.keyCode;
  $(".keypress").text(key);

});

出力結果

keyup()イベント：押し込まれたキーボードのキーが上がったときイベント発火

jQueryのkeyupイベントは、jQueryのイベントの一つです。keyup()は、押し込まれたキーボードが上がったときイベントが発火します。

基本書式

$("フォーム要素").keyup(function(){
  // ここに処理の内容を記述する

});

上の書式にコードを当てはめると次のようになります。

<input type="text" placeholder="テキストを入力する">

<p>keyup:<span class="keyup"></span></p>

$("input").keyup(function (e) {
  const key = e.keyCode;
  $(".keyup").text(key);

});

出力結果

keydown/keypress/keyupでは、keydownが最も発火が早い。

keydown()、keypress()、keyup()の3つのイベントの中で、は、イベント発火のタイミングが最も早いのはkeydownです。

<input type="text">
<p>keydown:<span class="keydown"></span></p>
<p>keypress:<span class="keypress"></span></p>
<p>keyup:<span class="keyup"></span></p>

$("input").keydown(function (e) {
  const key = e.keyCode;
  $(".keydown").text(key);

});

$("input").keypress(function (e) {
  const key = e.keyCode;
  $(".keypress").text(key);

});

$("input").keyup(function (e) {
  const key = e.keyCode;
  $(".keyup").text(key);

});

出力結果