小程式如何處理鍵盤覆蓋輸入框（附程式碼）

這篇文章帶給大家的內容是關於小程式如何處理鍵盤覆蓋輸入框（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

在行動端裡, 當輸入框處於頁面比較下方的時候回發生鍵盤覆蓋輸入框的情況, 在小程式中也發生了類似情況, 但小程式提供了一些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屬性來喚起鍵盤.

實現的程式碼：https://github.com/cwj0417/step/blob/master/src/pages/did/index.vue

#

以上是小程式如何處理鍵盤覆蓋輸入框（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！