jQuery フォーム イベン...LOGIN

jQuery フォーム イベント focus() および Blur() イベント

focus() イベント

定義と使用法

focus イベントは、要素がフォーカスを取得したときに発生します。

マウスをクリックして要素を選択するか、タブキーで配置すると、その要素にフォーカスが置かれます。

focus() メソッドは、フォーカス イベントをトリガーするか、フォーカス イベントの発生時に実行する関数を指定します。

blur() イベント


定義と使用法

Blur イベントは、要素がフォーカスを失ったときに発生します。

blur() 関数はブラー イベントをトリガーします。関数パラメーターが設定されている場合、関数はブラー イベントの発生時に実行されるコードを指定することもできます。

ヒント: 以前は、blur イベントはフォーム要素でのみ発生しました。新しいブラウザでは、このイベントは任意の要素で使用できます。

以下の例を見てみましょう:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    请输入:<input type="text">

    <script>
        $('input').focus(function(){
            $('input').css('background',"red");
        })

        $('input').blur(function(){
            $('input').css('background',"green");
        })
    </script>
</body>
</html>

テキスト ボックスをクリックすると、テキスト ボックスにフォーカスが設定され、背景色が赤に変わります

テキスト ボックスの外側をクリックすると、テキスト ボックスはフォーカスを失い、緑に変わります

次のセクション
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> 请输入:<input type="text"> <script> $('input').focus(function(){ $('input').css('background',"red"); }) $('input').blur(function(){ $('input').css('background',"green"); }) </script> </body> </html>
コースウェア