jQueryでフォーカスが当たった時と外れた時、要素を表示・非表示にする

今回は、jQueryでフォーカスが当たった時と外れた時の処理を「.focus()」メソッドと「.blur()」メソッドを使って実装。
「.focus()」メソッドと「.blur()」メソッドは要素に対するイベントを起こすものなので、前記事「ボタンをクリックした時にjQueryで表示・非表示をする」で使用した「.show()」メソッドと「.hide()」メソッドも使いつつ、フォーカスを当てた時とフォーカスが外れた時に要素を表示・非表示にするものに仕上げたので備忘録。
ホームページのお問い合わせフォームに表示されている入力欄にフォーカスを当てた時は入力説明が表示され、フォーカスを外した時は入力説明が非表示になるイメージで作りました。
※jQueryの勉強をしつつ見た目はいい感じにしたかったので、Bootstrap を使用しています。

今回の内容

STEP1.フォーカスが当たった時に要素を表示、外れている時は要素を非表示にする。
フォーカスが当たった時に要素を表示、外れている時は要素を非表示

スポンサーリンク
スポンサーリンク




STEP1-1. 要素を画面に作成する

まずはお問い合わせフォームを作成します。
このSTEPですることは、3つです。
① フォーカスが当たる要素(入力欄)にidを指定する。
② フォーカスが当たった時と外れた時に表示・非表示にする要素(ラベル)にidを指定する。
③ 入力説明である要素はcssで非表示にしておく。

① フォーカスが当たる要素(入力欄)にidを指定する。

inputタグで入力欄を作り、idを指定します。次の画像はidを指定している例です。
フォーカスが当たる要素(入力欄)にidを指定

② フォーカスが当たった時と外れた時に表示・非表示にする要素(ラベル)にidを指定する。

labelタグで入力説明を作り、idを指定します。次の画像はidを指定している例です。
フォーカスが当たった時と外れた時に表示・非表示にする要素(ラベル)にidを指定

③ 入力説明である要素はcssで非表示にしておく。

②で作成した入力説明は、cssでページを表示したときは非表示にしておきます。
入力説明である要素はcssで非表示

それではcssも含め、上記3つのポイントを含めてhtmlファイルに記述していきます。
以下、htmlファイルの中身です。

・・・・・cssの部分です・・・・・
<style>
body{
font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',Meiryo, メイリオ, sans-serif;
}
h1{
font-size: 25px;
background-color: #FCE4EC;
border-left: solid 15px #E91E63;
padding: 10px;
}
.tx{
margin-left: 10px;
padding: 5px;
}
label{
width: 180px;
padding-bottom: 15px;
display: inline-block;
}
textarea{
vertical-align: top;
}
.txa{
margin-left: 10px;
padding: 5px;
width: 450px;
height: 200px;
}
p{
color: #B71C1C;
font-weight: bold;
}
.botan{
margin: 15px 0 0 195px;
}
.active{
background: gold;
}
#msg1,#msg2,#msg3,#msg4{
display:none;
width: 400px;
padding-left: 15px;
color: #B71C1C;
}
</style>
・・・・・省略。htmlの部分です・・・・・
<div class="container">
<h1>お問い合わせフォーム</h1>
<p style="font: #B71C1C;">※「*」印の項目は入力必須です。</p>
<form>
<label>お名前*</label>:<input type="text" id="text1" class="tx"><label id="msg1">全角で入力してください。</label><br>
<label>お名前(カナ)</label>:<input type="text" id="text2" class="tx"><label id="msg2">全角カタカナで入力してください。</label><br>
<label>メールアドレス*</label>:<input type="text" id="text3" class="tx"><label id="msg3">メールアドレスを入力してください。</label><br>
<label>メールアドレス(確認)*</label>:<input type="text" id="text4" class="tx"><label id="msg4">確認用にもう一度メールアドレスを入力してください。</label><br>
<label>問い合わせ内容*</label>:<textarea rows="5" cols="50" class="txa"></textarea><br>
<button class="btn botan">入力内容を送信</button>
</form>
</div> 

ここまでだと、次の画像のように表示されている状態になっていると思います。↓
入力フォーム画面

要素(ボタン)を表示する画面が作成できたら、続いてjQueryを記述するファイルを作っていきます。
jQueryは別ファイルに記述することが多いのでhtmlファイルからjsファイルを参照するようにします。今回はjsファイルの名前を「sample.js」として、以下をbodyの閉じタグ前に記述します。

・・・・・省略・・・・・
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="sample.js"></script>
</body>

STEP1-2. フォーカスが当たった時に要素を表示、外れている時は要素を非表示にする

jQueryでフォーカスが当たった時に要素を表示し、フォーカスが外れている時は要素を非表示にする動作をさせていきます。
ここで『.focus()』メソッドと『.blur()』メソッド、『.show()』メソッドと『.hide()』メソッドを組み合わせて使います。
動作の流れは、
1. ①の要素(入力欄)にフォーカスが当たった時に、
2. 「.focus()」メソッドで②の要素(ラベル)を表示する。
3. ①の要素(入力欄)からフォーカスが外れたときに「.blur()」メソッドで②の要素(ラベル)を非表示にする。
といった感じです。
さっそく、以下の内容を「sample.js」に記述します。

//フォーカスが当たった時と外れた時の処理
$(function(){
$('#text1').focus(function(){
$('#msg1').show();
});
$('#text1').blur(function(){
$('#msg1').hide();
});
$('#text2').focus(function(){
$('#msg2').show();
});
$('#text2').blur(function(){
$('#msg2').hide();
});
$('#text3').focus(function(){
$('#msg3').show();
});
$('#text3').blur(function(){
$('#msg3').hide();
});
$('#text4').focus(function(){
$('#msg4').show();
});
$('#text4').blur(function(){
$('#msg4').hide();
});
});

どうですか?
次の画像みたいに入力欄にフォーカスが当たった時と外れた時のラベルを表示・非表示が変化していたらOKです。
※ラベルの表示が変化しない場合は、F12からDeveloper Toolsを開き、Consoleタブでエラーが出ていないか確認してみてください。
フォーカスが当たった時に要素を表示、外れている時は要素を非表示

今回の動作確認用にデモサイトを準備しました。
よかったら画像をクリックしてデモサイトで動作確認してみてください。↓

「jQueryでフォーカスが当たった時と外れた時、要素を表示・非表示にする」デモサイト

デモサイト

スポンサーリンク
スポンサーリンク




シェアする

フォローする

スポンサーリンク
スポンサーリンク