小程序處理鍵盤覆蓋輸入框的方法-創(chuàng)新互聯(lián)

小編給大家分享一下小程序處理鍵盤覆蓋輸入框的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

專注于為中小企業(yè)提供網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)耒陽免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上千企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

在移動端里, 當(dāng)輸入框處于頁面比較下方的時候回發(fā)生鍵盤覆蓋輸入框的情況, 在小程序中也發(fā)生了類似情況, 但小程序提供了一些api, 但不能達(dá)到需求. 這里來簡單說一下解決思路.

小程序的默認(rèn)行為

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

也就是如果不經(jīng)過處理, 小程序的鍵盤是不會覆蓋輸入框的. 但是在我的需求里這樣還不夠, 因?yàn)轫撁嫔喜糠质切枰掷m(xù)展示的內(nèi)容, 不希望把頁面向上推.

所以下面要通過小程序的api來解決這些問題.

cursor-spacing

在比較正常的UI設(shè)計(jì)中, 輸入框外面實(shí)際都會有一層wrapper, 而很明顯小程序是默認(rèn)行為是不知道的, 所以結(jié)果是會把這層wrapper的下半部分(輸入框以下的)切掉. 那么就非常難看了.

引入這個apicursor-spacing, 設(shè)多少, input下面就留多少. 這個數(shù)字應(yīng)當(dāng)是'輸入框下邊緣到wrapper結(jié)束的距離".

小程序的坑在于: 文檔上的單位是錯的, 本來就需要試才知道這個屬性的含義是什么, 所以單位錯導(dǎo)致無效果就讓一(大)部分人放棄了. 正確的單位是帶有單位的字符串. 例如10px或者100rpx.

adjust-position

剛才說到我的需求, 我希望頁面不向上推, 而直接把輸入框頂上來.

于是嘗試了這個api. 默認(rèn)是true, 把他設(shè)為false. 效果變成了: 點(diǎn)了輸入框, 鍵盤完美覆蓋輸入框.

于是在加上cursor-spacing, 發(fā)現(xiàn)這兩個api是不能同時生效的.

所以最后結(jié)論是: 單純用提供的api無法實(shí)現(xiàn)需求了. 所以只能監(jiān)聽事件自己做.

解決方案

手動操作輸入框思路:

1. adjust-position設(shè)為false.

2. 在輸入框的wrapper的bottom樣式綁到本地?cái)?shù)據(jù), 并設(shè)為absolute定位.

3. 在focus事件里改變輸入框的位置.

4. 在blur事件里復(fù)原輸入框的位置.

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

如何確定輸入框的位置

發(fā)現(xiàn)在bindfocus事件中可以獲得鍵盤的高度, 經(jīng)過嘗試, 鍵盤的高度是以px為單位的. 所以直接把bottom的值設(shè)為px高度就行了.

如果輸入框wrapper的相對定位不是頁面底部, 情況就比較復(fù)雜, 若是用rpx為單位, 需要獲得屏幕寬高來計(jì)算px數(shù), 在不麻煩的情況下可以調(diào)整布局使wrapper相對于頁面底部定位.

在改變style后輸入框立即失去焦點(diǎn)

發(fā)生了這個情況后表現(xiàn)為: 點(diǎn)了輸入框, 輸入框的wrapper閃一下又回原處. (因?yàn)槭ソ裹c(diǎn))

經(jīng)過多次試驗(yàn), 需要做的是在綁定一個本地變量到focus屬性.

然后用wx:if根據(jù)是否focus隱藏輸入框, 放一個假的輸入框, 點(diǎn)擊以后使改變focus屬性來喚起鍵盤.

看完了這篇文章，相信你對小程序處理鍵盤覆蓋輸入框的方法有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

新聞標(biāo)題：小程序處理鍵盤覆蓋輸入框的方法-創(chuàng)新互聯(lián)
地址分享：http://muchs.cn/article32/spgsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、ChatGPT、網(wǎng)站排名、品牌網(wǎng)站制作、云服務(wù)器、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)