フォーカスが外れたことを感知する。

2015年8月3日

前の記事のfocus()とは逆に、フォーム部品から
フォーカスが外れた(選択されていない状態になった)ことを
感知するblur()です。

サンプルコードは、前回の記事で紹介したものに
メソッドチェーンでblur()を追加したものです。

input要素がフォーカスされていると値を削除します。
フォーカスが外れたときはフォームに何かが入力されているか
否か(input要素のvalue属性の値の有無)を判定して
その結果により異なる処理をしています。

value属性が空のときは、最初のイベントと同じイベント処理を
再設定して、value属性に値が入って入ればなにもしません。

if文についてはjavaScriptのIF分を調べてみてください。

実行結果はこちらです。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQueryStudy</title>

    <style>
	*{margin:0;padding:0;}
	
    </style>    
    
    <script src="js/jquery-1.11.3.js"></script>  
    
</head>
<body>

    郵便番号：<input type="text" value="">

<script>
$(document).ready(function(){

    $("input").val("入力してください").css("color","#00ff00")
        .one("focus",function(){
        $(this).val("").css("color","#ff0000");
        console.log("AAA");
    }).blur(function(){
       if( $(this).val()=="" ){
           $(this).val("入力してください").css("color","#00ff00")
                .one("focus",function(){
              $(this).val("").css("color","#ff0000");
               console.log("BBB");
           });
       } 
    });

});

</script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>jQueryStudy</title>

<style>

*{margin:0;padding:0;}

</style>

</head>

<body>

郵便番号：<input type="text" value="">

$(document).ready(function(){

$("input").val("入力してください").css("color","#00ff00")

.one("focus",function(){

$(this).val("").css("color","#ff0000");

console.log("AAA");

}).blur(function(){

if( $(this).val()=="" ){

$(this).val("入力してください").css("color","#00ff00")

.one("focus",function(){

$(this).val("").css("color","#ff0000");

console.log("BBB");

});

}

});

</script>

</body>

</html>