jQueryにはフォーカスを当てたり外したりするだけでイベントが発火するフォーカスイベントがあります。フォーカスイベントには、focus()、blur()、focusin()、focusout()の4種類があります。
この記事では「focus()、blur()、focusin()、focusout()のイベントの使い方」について解説します。記事の後半では、focus()とfocusin()の違い、blur()とfocusout()の違いについても解説します。
- jQueryの
focus()、blur()、focusin()、focusout()イベントの基礎知識 focus()とfocusin()の違いblur()とfocusout()の違い
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
focus()：input要素にフォーカスを当てるとイベント発火
focus()はinput要素などにフォーカスを当てたときにイベントが発火します。
focus()の基本書式
$("フォーカス要素").focus();上の書式にコードを当てはめると次のようになります。
<input type="text" placeholder="focus">$("input").focus(function () {
console.log("focus!");
});出力結果
input要素にフォーカスをあてると、コンソール画面でテキストが出力されます。
blur()：input要素からフォーカスを外したときイベント発火
blur()はinput要素などからフォーカスが外れたときにイベントが発火します。
blur()の基本書式
$("フォーカス要素").blur();上の書式にコードを当てはめると次のようになります。
<input type="text" placeholder="blur">$("input").blur(function () {
console.log("blur!");
});出力結果
input要素にフォーカスをあて、そのフォーカスを外すと、コンソール画面でテキストが出力されます。
focusin()：input要素にフォーカスを当てるとイベント発火
focusin()はinput要素などにフォーカスを当てたときにイベントが発火します。
focusin()の基本書式
$("フォーカス要素").focusin();上の書式にコードを当てはめると次のようになります。
<input type="text" placeholder="focusin">$("input").focusin(function () {
console.log("focusin!");
});出力結果
input要素にフォーカスをあてると、コンソール画面でテキストが出力されます。
イベントの内容としては、focus()と同様の動きになります。
focusout()：input要素からフォーカスを外したときイベント発火
focusout()はフォーカスが外れたときにイベントが発火します。
focusout()の基本書式
$("フォーカス要素").focusout();上の書式にコードを当てはめると次のようになります。
<input type="text" placeholder="focusout">$("input").focusout(function () {
console.log("focusout!");
});出力結果
input要素にフォーカスをあて、そのフォーカスを外すと、コンソール画面でテキストが出力されます。
イベントの内容としては、blur()と同様の動きになります。
focus()とfocusin()の違い
focus()とfocusin()はどちらも要素にフォーカスを当てるとイベントが発火します。2つのイベントの違いは、「子要素にイベントが影響するか」という違いがあります。
例えば次のようHTMLのformタグに、focus()イベントとfocusin()イベントを適用します。
<form action="">
<input type="text" class="form" placeholder="focusとfocusinの違い">
</form>
<div class="focusbox">
<p>focus</p>
</div>
<div class="focusinbox">
<p>foucsin</p>
</div>$("form").focus(function () {
$(".focusbox").css("background", "red");
});
$("form").focusin(function () {
$(".focusinbox").css("background", "blue");
});出力結果
See the Pen juery-focus-focusin by ZeroPlus (@zeroplus-programming) on CodePen.
formタグにフォーカスを当てると、focusin()イベントのCSSメソッドだけ適用されました。
このように、子要素にイベントが影響するかどうかの違いがあります。
focus()とfocusin()の違い
- focus()は子要素にイベントが影響しない
- focusin()は子要素にイベントが影響する
blurとfocusoutの違い
blur()とfocusout()はどちらも要素にフォーカスを当て、そのフォーカスを外すとイベントが発火します。
こちらもfocus()とfocusin()の場合と同様に、「子要素にイベントが影響するか」という違いがあります。
例えば次のようHTMLのformタグに、blur()イベントとfocusout()イベントを適用します。
<form action="">
<input type="text" class="form" placeholder="blurとfocusoutの違い">
</form>$("form").blur(function () {
$(".blurbox").css("background", "red");
});
$("form").focusout(function () {
$(".focusoutbox").css("background", "blue");
});See the Pen jQery-blur-focusout by ZeroPlus (@zeroplus-programming) on CodePen.
blur()とfocusout()の違い
blur()は子要素にイベントが影響しないfocusout()は子要素にイベントが影響する
まとめ
jQueryのfocus()、blur()、focusin()、focusout()の4つのフォーカスイベントは、フォーカスを当てたり外したりするだけでイベントが発火します。focus()とfocusin()、blur()とfocusout()はそれぞれ似たようなイベントですが、状況に合わせてイベントを使い分けていきましょう。
jQueryのfocus()/blur()/focusin()/focusout()まとめ
focus()：要素にフォーカスを当てるとイベント発火blur()：要素にフォーカスを当て、そのフォーカスを外すとイベント発火focusin()：要素にフォーカスを当てるとイベント発火focusout()：要素にフォーカスを当て、そのフォーカスを外すとイベント発火focus()とfocusin()の違い：focusin()は子要素にイベントが影響するblur()とfocusout()の違い：focusout()は子要素にイベントが影響する
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
