【JavaScript】フォーカスが外れた時のイベント（onBlur）

投稿者: | 2020年8月23日
0件のコメント
フリー画像

本日はJavaScriptでテキストボックスなどのフォーカスが外れた時のイベント処理をしてくれるonBlurについて解説します。

それではいってみましょう！

 

onBlur

二つのテキストボックス内容が相違してて、テキストボックスからフォーカスが外れた際にアラートが発動されます。

テキストボックスの内容が一緒の時はイベントは発動しません。

 

パスワードやメールの確認の時などに使用できそうなイベントハンドラです。

onBlur

onBlur
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>【HTML】DairyRecord</title>
</head>
 
<body>
    <div class="test">
        <input type="text" class="aaa" name="aaa" id="aaa">
        <input type="text" class="bbb" name="bbb" id="bbb" onBlur="allCheck(this)">
    </div>
 
    <script type="text/javascript">
        function allCheck(a) {
            var strPass = document.getElementById("aaa").value;
            var strPass2 = a.value;
 
            if (strPass != strPass2) {
                alert('値が一致しません。');
                document.getElementById("aaa").focus();
                a.value="";
            }
        }  
    </script>
</body>
</html>
 

まとめ   

ちなみに逆のフォーカスがあたった時のイベント処理は → onFocus です！

以上です。

JavaScript/jQuery目次