小程序如何處理鍵盤覆蓋輸入框

在移動端裏, 當輸入框處於頁面比較下方的時候回發生鍵盤覆蓋輸入框的狀況, 在小程序中也發生了相似狀況, 但小程序提供了一些api, 但不能達到需求. 這裏來簡單說一下解決思路.

小程序的默認行爲

在發生了鍵盤覆蓋輸入框的時候, 在不操做任何api的狀況下, 小程序會把屏幕向上推, 推到輸入框正好在鍵盤上方的位置.

也就是若是不通過處理, 小程序的鍵盤是不會覆蓋輸入框的. 可是在個人需求裏這樣還不夠, 由於頁面上部分是須要持續展現的內容, 不但願把頁面向上推.

因此下面要經過小程序的api來解決這些問題.

cursor-spacing

在比較正常的UI設計中, 輸入框外面實際都會有一層wrapper, 而很明顯小程序是默認行爲是不知道的, 因此結果是會把這層wrapper的下半部分(輸入框如下的)切掉. 那麼就很是難看了.

引入這個apicursor-spacing, 設多少, input下面就留多少. 這個數字應當是'輸入框下邊緣到wrapper結束的距離".

小程序的坑在於: 文檔上的單位是錯的, 原本就須要試才知道這個屬性的含義是什麼, 因此單位錯致使無效果就讓一(大)部分人放棄了. 正確的單位是帶有單位的字符串. 例如10px或者100rpx.

adjust-position

剛纔說到個人需求, 我但願頁面不向上推, 而直接把輸入框頂上來.

因而嘗試了這個api. 默認是true, 把他設爲false. 效果變成了: 點了輸入框, 鍵盤完美覆蓋輸入框.

因而在加上cursor-spacing, 發現這兩個api是不能同時生效的.

因此最後結論是: 單純用提供的api沒法實現需求了. 因此只能監聽事件本身作.

解決方案

手動操做輸入框思路:

1. adjust-position設爲false.
2. 在輸入框的wrapper的bottom樣式綁到本地數據, 並設爲absolute定位.
3. 在focus事件裏改變輸入框的位置.
4. 在blur事件裏復原輸入框的位置.

按照這個思路操做, 遇到了幾個問題:

如何肯定輸入框的位置

發如今bindfocus事件中能夠得到鍵盤的高度, 通過嘗試, 鍵盤的高度是以px爲單位的. 因此直接把bottom的值設爲px高度就好了.

若是輸入框wrapper的相對定位不是頁面底部, 狀況就比較複雜, 如果用rpx爲單位, 須要得到屏幕寬高來計算px數, 在不麻煩的狀況下能夠調整佈局使wrapper相對於頁面底部定位.

在改變style後輸入框當即失去焦點

發生了這個狀況後表現爲: 點了輸入框, 輸入框的wrapper閃一下又回原處. (由於失去焦點)

通過屢次試驗, 須要作的是在綁定一個本地變量到focus屬性.

而後用wx:if根據是否focus隱藏輸入框, 放一個假的輸入框, 點擊之後使改變focus屬性來喚起鍵盤.

貼一份實現的代碼.

原文地址