jQuery focus和blur事件 - tw511教學網

在 jQuery 中，常用的表單事件有 3 種：focus 和 blur、select、change。實際上，除了上面這幾個，還有一個 submit 事件。不過，submit 事件一般都是結合後端技術來使用，所以可以暫時不考慮。本節教學先來介紹 focus 和 blur。

focus 表示獲取焦點時觸發的事件，而 blur 表示失去焦點時觸發的事件，兩者是相反的操作。focus 和 blur 這兩個事件往往是配合起來使用的。例如，使用者準備在文字方塊中輸入內容時，文字方塊會獲得游標，進而觸發 focus 事件；當文字方塊失去游標時，就會觸發 blur 事件。

並不是所有的 HTML 元素都有焦點事件，具有“獲取焦點”和“失去焦點”特點的元素只有兩種：

表單元素（無線電鈕、核取方塊、單行文字方塊、多行文字方塊、下拉選單）；
超連結。

判斷一個元素是否具有焦點事件很簡單，我們開啟一個頁面後按 Tab 鍵，能夠選中的就是帶有焦點特性的元素。在實際開發中，焦點事件（focus 和 blur）一般用於單行文字方塊和多行文字方塊，其他地方比較少見。

舉例：搜尋方塊

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #search{color:#BBBBBB;}
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function() {
            //獲取文字方塊預設值
            var txt = $("#search").val();
            //獲取焦點
            $("#search").focus(function(){
                if($(this).val() == txt){
                    $(this).val("");
                }
            })
            //失去焦點
            $("#search").blur(function() {
                if ($(this).val() == "") {
                    $(this).val(txt);
                }
            })
        })
    </script>
</head>
<body>
    <input id="search" type="text" value="百度一下，你就知道" />
    <input type="button" value="搜尋" />
</body>
</html>

預覽效果如圖 1 所示。

圖 1：獲取焦點和失去焦點的效果