jQueryで使われるフォームイベントについてまとめました。
フォームイベントは、フォーム内の要素（inputやselectなど）の操作に関してイベントが発火する便利なイベントです。この記事で基礎知識をインプットしましょう！
また、各セクションでjQueryのイベントごとの解説記事を紹介しています。合わせてご一読ください。
- jQueryのフォームイベントの基礎知識
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
【jQuery】フォームイベントのまとめ
jQueryのフォームイベントには、次のようなものがあります。
focus()：要素にフォーカスを当てるとイベント発火blur()：要素にフォーカスを当て、そのフォーカスを外すとイベント発火focusin()：要素にフォーカスを当てるとイベント発火focusout()：要素にフォーカスを当て、そのフォーカスを外すとイベント発火change()：フォーム要素が変更されたときにイベント発火submit()：ユーザーがsubmit要素をクリックしたときにイベント発火keydown()：キーボードのキーが押し込まれたとき、イベント発火keypress()：キーボードのキーが押されたとき、イベント発火keyup()：押し込まれたキーボードが上がったとき、イベント発火
それぞれのイベントについて簡単に紹介していきます。
focus()イベントについて
focus()イベントは、input要素などにフォーカスを当てたときにイベントが発火します。
focus()イベントと同じようなイベントに、focusin()イベントがあります。focusin()との違いは、子要素にもイベントが影響するかどうかです。
focus()イベントは、子要素にイベントが影響しません。
focus()の基本書式
$(“フォーム要素”).focus(function(){
// ここに処理の内容を記述する
});コードを実際に当てはめると、次のようになります。
<input type="text" placeholder="focus">$("input").focus(function () {
console.log("focus!");
});出力結果
focus()については、下記の記事でも紹介しています。
blur()イベントについて
blur()イベントは、フォーカスが外れたときにイベントが発火します。
blur()イベントと同じようなイベントに、focusout()イベントがあります。focusout()との違いは、子要素にもイベントが影響するかどうかです。
blur()イベントは、子要素にイベントが影響しません。
blur()の基本書式
$("フォーム要素").blur(function(){
// ここに処理の内容を記述する
});コードを実際に当てはめると、次のようになります。
<input type="text" placeholder="blur">$("input").blur(function () {
console.log("blur!");
});出力結果
blur()については、下記の記事でも紹介しています。
focusin()イベントについて
focusin()イベントは、input要素などにフォーカスを当てたときにイベントが発火します。
focusin()イベントと同じようなイベントに、focus()イベントがあります。focus()との違いは、子要素にもイベントが影響するかどうかです。
focusin()イベントは、子要素にイベントが影響します。
focusin()の基本書式
$("フォーム要素").focusin(function(){
// ここに処理の内容を記述する
});コードを実際に当てはめると、次のようになります。
<input type="text" placeholder="focusin">$("input").focusin(function () {
console.log("focusin!");
});出力結果
focusin()については、下記の記事でも紹介しています。
focusout()イベントについて
focusout()イベントは、フォーカスが外れたときにイベントが発火します。
focusout()イベントと同じようなイベントで、blur()イベントがあります。blur()との違いは、子要素にもイベントが影響するかどうかです。
focusout()イベントは、子要素にイベントが影響します。
focusout()の基本書式
$("フォーム要素").focusout(function(){
// ここに処理の内容を記述する
});コードを実際に当てはめると、次のようになります。
<input type="text" placeholder="focusout">$("input").focusout(function () {
console.log("focusout!");
});出力結果
focusout()については、下記の記事でも紹介しています。
change()イベントについて
change()イベントは、フォーム要素の内容が変更されたときにイベントが発火します。
change()の基本書式
$("フォーム要素").change(function(){
// ここに処理の内容を記述する
});コードを実際に当てはめると、次のようになります。
<input type="text" placeholder="文章を入力する">$('input').change(function () {
$('input').css('background', 'red');
});出力結果
change()については、下記の記事でも紹介しています。
submit()イベントについて
submit()イベントは、ユーザーが送信ボタンをクリックした際にイベントが発火します。
submit()の基本書式
$("submit要素").submit(function(){
// ここに処理の内容を記述する
});コードを実際に当てはめると、次のようになります。
<form action="">
<button type="submit">送信</button>
</form>$('form').submit(function () {
alert('submit!');
});出力結果
See the Pen submit-sample by ZeroPlus (@zeroplus-programming) on CodePen.
submit()については、下記の記事でも紹介しています。
keydown()イベントについて
keydown()イベントは、キーボードのキーが押し込まれたときイベントが発火します。
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);
});出力結果
keydown()については、下記の記事でも紹介しています。
keypress()イベントについて
keypress()イベントは、キーボードのキーが押されたときイベントが発火します。
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);
});出力結果
keypress()については、下記の記事でも紹介しています。
keyup()イベントについて
keyup()イベントは、押し込まれたキーボードのキーが上がったときイベントが発火します。
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);
});出力結果
keyup()については、下記の記事でも紹介しています。
まとめ
フォームイベントは、inputやselectなどのフォーム要素に対して様々なイベントを設定することができます。その他のさまざまなイベントと組み合わせて使用しましょう！
jQueryフォームイベントまとめ
focus()：要素にフォーカスを当てるとイベント発火blur()：要素にフォーカスを当て、そのフォーカスを外すとイベント発火focusin()：要素にフォーカスを当てるとイベント発火focusout()：要素にフォーカスを当て、そのフォーカスを外すとイベント発火change()：フォーム要素が変更されたときにイベント発火submit()：ユーザーがsubmit要素をクリックしたときにイベント発火keydown()：キーボードのキーが押し込まれたとき、イベント発火keypress()：キーボードのキーが押されたとき、イベント発火keyup()：押し込まれたキーボードが上がったとき、イベント発火
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
