フォーム関連のイベント処理

2015年8月3日

フォーカスを感知する focus()

focus()は、input要素などのフォーム部品が
マウスやタブキーによって選択された状態(フォーカス状態)に
なったことを感知して、設定された処理を実行します。

他のイベントと同様に、括弧内にfunction(){...}を使い、
そのなかに処理したい内容をかきます。

input要素のvalue属性の値をval()で書き換て、
「入力してください」というテキストを緑色に表示します。
ユーザーがinput要素をフォーカスすると、value属性の値が空に
なって、テキストは削除されます。同時にinput要素のCSSを
操作して、文字の色を今回は赤色に変更しています。

sampleForm02

サンプルコードのコメントアウトされている箇所(22行目～25行目)は
input要素がフォーカスされるたびにフォームの空にする処理が
実行されるため、ユーザーが一度入力した内容が削除されてしまいます。

実際につかうとなると、イベント発生時に一度だけ処理する
one()イベントを使用しfocusイベントが発生した初回のみ処理を
実行した方がよいかと思います。(27行目～30行目)

実行結果はこちらです。

<!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")
        .focus(function(){
        $(this).val("").css("color","#ff0000");
    });
    */
    $("input").val("入力してください").css("color","#00ff00")
        .one("focus",function(){
        $(this).val("").css("color","#ff0000");
    });

});

</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")

.focus(function(){

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

});

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

.one("focus",function(){

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

});

</script>

</body>

</html>