jQuery 表單事件focus()和blur()事件

focus()事件

定義和用法

#當元素獲得焦點時,發生 focus 事件。

當透過滑鼠點擊選取元素或透過 tab 鍵定位到元素時,該元素就會獲得焦點。

focus() 方法觸發 focus 事件,或規定發生 focus 事件時執行的函數。

blur()事件


#定義和用法

#當元素失去焦點時發生 blur 事件。

blur() 函數觸發 blur 事件,或如果設定了 function 參數,函數也可規定發生 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>