導航

前言

小程序輸入框獲取焦點時，鍵盤會彈起；輸入框失去焦點時，鍵盤會收縮。輸入框聚焦、失焦和鍵盤的彈起和收縮都可以綁定事件處理器：

輸入框獲得焦點時，會觸發聚焦事件和鍵盤高度變化（彈起）事件；失去焦點時，會觸發失焦事件和鍵盤高度變化（收縮）事件；其中，鍵盤的彈起和收縮狀態可以通過鍵盤高度（event.detail.height）判斷，鍵盤高度大于零時，鍵盤為彈出狀態；鍵盤高度等于零時，鍵盤為收縮狀態。

本文著重討論不同場景下輸入框獲得或失去焦點時，事件處理器的執行順序。

輸入框獲得焦點

點擊輸入框，輸入框獲取焦點，首先執行鍵盤高度變化（彈起）事件，然后執行聚焦事件。

輸入框失去焦點

點擊輸入框以外的區域，輸入框失去焦點時，首先執行失焦事件，然后執行鍵盤高度變化（收縮）事件。

如果輸入框以外的區域綁定有點擊事件，首先執行點擊事件，然后執行失去焦點事件（失焦和鍵盤高度變化）。

鍵盤高度變化事件

輸入框獲得或失去焦點時，鍵盤高度變化事件均可能 執行多次，我們需要記錄上一次的鍵盤高度，如果本次的鍵盤高度和上一次的鍵盤高度相同，則提前結束本次事件的執行。

輸入框焦點屬性

輸入框有一個焦點屬性：focus（布爾類型），它的值設置為 true 或 false 時，輸入框會獲得或失去焦點，同樣會觸發前文所述的事件處理器，執行順序也是相同的。

為了避免業務邏輯混亂，我們盡可以不要在聚焦、失焦和鍵盤高度變化事件中設置焦點屬性的值。

結語

輸入框是小程序使用頻率較高的組件之一，使用它的事件處理業務邏輯時，只有搞清楚相關事件的執行順序，才能保證業務邏輯的正確性。