jQuery 焦點有關的focus/blur event用法

2019-12-11 17:10:08

本經驗介紹在jQuery程式設計中，焦點有關的focus/blur event何時觸發，以及如何新增處理常式。

首先，以如圖網頁為例。在其搜尋輸入框（一個input標籤）上，可以看到如圖多個event。其中也有focus和blur兩個event。

通過jQuery("...").focus(處理常式)，給標籤的獲取焦點新增處理常式。如圖所示。

以下三種都是focus的觸發條件。

第一個是本無焦點，點選；

第二個是tab鍵切換至這個輸入框；

第三個是當輸入框本來在頁面內是焦點物件，瀏覽器獲得焦點/這個html頁面獲得焦點後，觸發了焦點物件的focus。

另一個與focus相對應的event就是blur，是失去焦點觸發。

如圖，新增blur的處理常式。

獲得焦點再失去觸發blur。

第一種，點選輸入框後又點選別處；

第二種，tab鍵切換到輸入框又切換至別處；

第三種，瀏覽器失去焦點，或者這個html頁面失去焦點。

如圖就是剛才兩個處理常式新增程式碼，總結在此。新增處理常式還可以用bind。取消處理常式用unbind。