focus(),blur()

inputタグをクリックして入力状態になるのをfocusを得るといいます。

そして、入力状態から離れたことをfocusが外れたといいます。

ではfocusを得た時のeventの作り方について調べましょう。

focusを得た時のevent

$('.class_Name').focus();

上にあるソースはセレクターにfocusを強制的に適用する時に使います。

eventを作るためにはfunction(){}を使います。下のように

$('.class_Name').focus(function(){
    //ここに機能を作成
});

focusが外れた時のevent

$('.class_Name').blur();

上にあるソースはセレクターにfocusを強制的に離れるようにする時に使います。

eventを作るためにはfunction(){}を使います。下のように

$('.class_Name').blur(function(){
    //ここに機能を作成
});

私たちはval()を勉強しました、これを利用してfocusを理解してみましょう。

HTML

<input type="text" class="text1" value="input your name" />
<input type="text" class="text2" value="input your id" />

jQuery

var text1 = $('.text1');
text1.focus(function(){
    text1.val('focusを得ました。');
});

text1.blur(function(){
    text1.val('focusが離れました。');
});

では、実行するためソースを作成してみましょう。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>COREASUR :: jQuery</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.0.min.js" ></script>
<script>
$(function(){
    var text1 = $('.text1');
    text1.focus(function(){
        text1.val('focusを得ました。');
    });

    text1.blur(function(){
        text1.val('focusが離れました。');
    });
});
</script>
<style>
</style>
</head>
<body>
    <input type="text" class="text1" value="input your name" />
    <input type="text" class="text2" value="input your id" />
</body>
</html>

結果

jQuery focus jQuery blur

みてくださってありがとうございます。