フォーカスアウト・フォーカスインについて学ぶ! Javascript / jQuery超初心者の勉強

2020-04-05

Javascriptでフォーカスアウト制御をみかけたので、フォーカスイン含めて勉強しなおそうと思います。

Javascriptでのフォーカスアウト・フォーカスイン制御

htmlのonfocus属性とonblur属性を使用しています。

onfocus(フォーカスした時)とonblur(フォーカスが外れた時)を利用してJavascriptのメソッドを実行しています。

サンプルコード Javascript

<input type="text" id="testID" onfocus="focusFunction()" onblur="blurFunction()">

<script>
function focusFunction() {
// フォーカスした時にinputのbackground-colorをyellowにする
document.getElementById("testID").style.background = "yellow";
}
function blurFunction() {
// フォーカスが外れた時にinputのbackground-colorをwhiteにする
document.getElementById("testID").style.background = "white";
}
</script>

test用

以下のinputエリアにフォーカスインした時にinputのbackgroundが黄色になりフォーカスアウトした時に白に戻ります。

サンプルコード Javascriptその2

せっかく作ったので、ほぼ内容同じです。フォーカスイン、アウト時にconsoleに文字が表示されます。

<form>
<input type="text" value="" onfocus="focusIn();" onblur="focusOut()">
</form>
<script>
//ファンクションfocusIn()を設定
function focusIn(){
//コンソールにFocus Inを表示
console.log("Focus In");
}
//ファンクションfocusOut()を設定
function focusOut(){
//コンソールにFocus Outを表示
console.log("Focus Out");
}
</script>

test用

以下のinputにフォーカスするとコンソールにFocus Inと表示されます。

jQueryでのフォーカスアウト・フォーカスイン制御

<form>
<input type="text" name="testJQ">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){ //ドキュメントの準備ができたら
$('input[name="testJQ"]').focus(function(){ // inputのnameがtestJQのエレメントがフォーカスインの時
$(this).css("background-color", "yellow"); // inputのbackground-colorを黄色に
});
$('input[name="testJQ"]').blur(function(){ // inputのnameがtestJQのエレメントがフォーカスアウトの時
$(this).css("background-color", "white"); // inputのbackground-colorを白に
});
});
</script>

test用 jQuery

以下のinputエリアにフォーカスインした時にinputのbackgroundが黄色になりフォーカスアウトした時に白に戻ります。変化はJavascriptと同じでつまらないですね。

おわり

参考サイト:https://www.w3schools.com/jsref/event_onblur.asp

HTML属性のonfocusを利用してalert()を実行しようとしたらchromeでalertの無限ループとなってしまいました。alertはonclickが良さそうと気づくまで時間を無駄にしてしまいました。blurの時は無限ループにならないっぽいのに不思議。