資訊專欄INFORMATION COLUMN
摘要：在移動端里當輸入框處于頁面比較下方的時候回發(fā)生鍵盤覆蓋輸入框的情況在小程序中也發(fā)生了類似情況但小程序提供了一些但不能達到需求這里來簡單說一下解決思路小程序的默認行為在發(fā)生了鍵盤覆蓋輸入框的時候在不操作任何的情況下小程序會把屏幕向上推推到輸入
在移動端里, 當輸入框處于頁面比較下方的時候回發(fā)生鍵盤覆蓋輸入框的情況, 在小程序中也發(fā)生了類似情況, 但小程序提供了一些api, 但不能達到需求. 這里來簡單說一下解決思路.
小程序的默認行為在發(fā)生了鍵盤覆蓋輸入框的時候, 在不操作任何api的情況下, 小程序會把屏幕向上推, 推到輸入框正好在鍵盤上方的位置.
也就是如果不經(jīng)過處理, 小程序的鍵盤是不會覆蓋輸入框的. 但是在我的需求里這樣還不夠, 因為頁面上部分是需要持續(xù)展示的內(nèi)容, 不希望把頁面向上推.
所以下面要通過小程序的api來解決這些問題.
cursor-spacing在比較正常的UI設計中, 輸入框外面實際都會有一層wrapper, 而很明顯小程序是默認行為是不知道的, 所以結果是會把這層wrapper的下半部分(輸入框以下的)切掉. 那么就非常難看了.
引入這個apicursor-spacing, 設多少, input下面就留多少. 這個數(shù)字應當是"輸入框下邊緣到wrapper結束的距離".
小程序的坑在于: 文檔上的單位是錯的, 本來就需要試才知道這個屬性的含義是什么, 所以單位錯導致無效果就讓一(大)部分人放棄了. 正確的單位是帶有單位的字符串. 例如10px或者100rpx.
adjust-position剛才說到我的需求, 我希望頁面不向上推, 而直接把輸入框頂上來.
于是嘗試了這個api. 默認是true, 把他設為false. 效果變成了: 點了輸入框, 鍵盤完美覆蓋輸入框.
于是在加上cursor-spacing, 發(fā)現(xiàn)這兩個api是不能同時生效的.
所以最后結論是: 單純用提供的api無法實現(xiàn)需求了. 所以只能監(jiān)聽事件自己做.
解決方案手動操作輸入框思路:
adjust-position設為false.
在輸入框的wrapper的bottom樣式綁到本地數(shù)據(jù), 并設為absolute定位.
在focus事件里改變輸入框的位置.
在blur事件里復原輸入框的位置.
按照這個思路操作, 遇到了幾個問題:
如何確定輸入框的位置發(fā)現(xiàn)在bindfocus事件中可以獲得鍵盤的高度, 經(jīng)過嘗試, 鍵盤的高度是以px為單位的. 所以直接把bottom的值設為px高度就行了.
如果輸入框wrapper的相對定位不是頁面底部, 情況就比較復雜, 若是用rpx為單位, 需要獲得屏幕寬高來計算px數(shù), 在不麻煩的情況下可以調(diào)整布局使wrapper相對于頁面底部定位.
在改變style后輸入框立即失去焦點發(fā)生了這個情況后表現(xiàn)為: 點了輸入框, 輸入框的wrapper閃一下又回原處. (因為失去焦點)
經(jīng)過多次試驗, 需要做的是在綁定一個本地變量到focus屬性.
然后用wx:if根據(jù)是否focus隱藏輸入框, 放一個假的輸入框, 點擊以后使改變focus屬性來喚起鍵盤.
貼一份實現(xiàn)的代碼.
原文地址
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100445.html
摘要：在掘金摸魚的時候看到了一個題第題搜索如何防抖，如何處理中文輸入，感覺挺有意思的。測試地址事件輸入法事件輸入法的第一個字母時觸發(fā)。輸入法狀態(tài)輸入內(nèi)容。輸入法選擇之后觸發(fā)。 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術水平，打牢基礎知識的中心思想，我...
摘要：在掘金摸魚的時候看到了一個題第題搜索如何防抖，如何處理中文輸入，感覺挺有意思的。測試地址事件輸入法事件輸入法的第一個字母時觸發(fā)。輸入法狀態(tài)輸入內(nèi)容。輸入法選擇之后觸發(fā)。 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術水平，打牢基礎知識的中心思想，我...
摘要：正式發(fā)布已正式發(fā)布，新版本重點關注工具鏈以及工具鏈在中的運行速度問題。文章內(nèi)容包括什么是內(nèi)存，內(nèi)存生命周期，中的內(nèi)存分配，內(nèi)存釋放，垃圾收集，種常見的內(nèi)存泄漏以及如何處理內(nèi)存泄漏的技巧。 1. Angular 6 正式發(fā)布 Angular 6.0.0 已正式發(fā)布，新版本重點關注工具鏈以及工具鏈在 Angular 中的運行速度問題。Angular v6 是統(tǒng)一整體框架、Material ...
摘要：正式發(fā)布已正式發(fā)布，新版本重點關注工具鏈以及工具鏈在中的運行速度問題。文章內(nèi)容包括什么是內(nèi)存，內(nèi)存生命周期，中的內(nèi)存分配，內(nèi)存釋放，垃圾收集，種常見的內(nèi)存泄漏以及如何處理內(nèi)存泄漏的技巧。 1. Angular 6 正式發(fā)布 Angular 6.0.0 已正式發(fā)布，新版本重點關注工具鏈以及工具鏈在 Angular 中的運行速度問題。Angular v6 是統(tǒng)一整體框架、Material ...
閱讀 2063·2021-11-11 16:55
閱讀 1398·2021-09-28 09:36
閱讀 1046·2019-08-29 15:21
閱讀 1575·2019-08-29 14:10
閱讀 2762·2019-08-29 14:08
閱讀 1635·2019-08-29 12:31
閱讀 3250·2019-08-29 12:31
閱讀 981·2019-08-26 16:47
