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が黄色になりフォーカスアウトした時に白に戻ります。
See the Pen focus change background by Nakamoto (@programmerlife) on CodePen.
サンプルコード Javascriptその２
せっかく作ったので、ほぼ内容同じです。フォーカスイン、アウト時にconsoleに文字が表示されます。とはいえわかりづらいので結局色も変えています。
<form>
<input type="text" id="testID2" value="" onfocus="focusIn();" onblur="focusOut()">
</form>
<script>
//ファンクションfocusIn()を設定
function focusIn(){
//コンソールにFocus Inを表示
console.log("Focus In");
//色を白へ変更
document.getElementById("testID2").style.background = "white";
}
//ファンクションfocusOut()を設定
function focusOut(){
//コンソールにFocus Outを表示
console.log("Focus Out");
//色を黄色へ変更
document.getElementById("testID2").style.background = "yellow";
}
</script>test用
以下のinputにフォーカスするとコンソールにFocus In、フォーカスアウトするとFocus Outと表示されます。そしてフォーカスアウトした時にinputのbackgroundが黄色に変わります。
See the Pen focus console by Nakamoto (@programmerlife) on CodePen.
コンソールについてはこちらでまとめているので、興味のあるかたはこちらもどうぞ。
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と同じでつまらないですね。
See the Pen Untitled by Nakamoto (@programmerlife) on CodePen.
おわり
参考サイト：https://www.w3schools.com/jsref/event_onblur.asp
HTML属性のonfocusを利用してalert()を実行しようとしたらchromeでalertの無限ループとなってしまいました。alertはonclickが良さそうと気づくまで時間を無駄にしてしまいました。blurの時は無限ループにならないっぽいのに不思議。
