微信小程序中textarea與input的問題怎么解決

這篇文章主要講解了“微信小程序中textarea與input的問題怎么解決”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“微信小程序中textarea與input的問題怎么解決”吧！

1、綁定bindkeyboardheightchange事件

問題：只為textarea綁定bindkeyboardheightchange事件，input也會觸發textarea的bindkeyboardheightchange事件，并且觸發所攜帶的參數都是textarea上面的參數

機型：安卓必現

解決辦法：未找到解決辦法

2、設置hold-keyboaed為true時

問題：當把textarea和input的hold-keyboaed屬性設置為true時，并且input中有一個type不為text時,連續切換會把鍵盤上方的完成卡住，并且不會再聚焦textarea

機型：安卓必現

解決辦法：1. 通過show-confirm-bar不顯示textarea鍵盤抬起時上方的完成按鈕，2. input的type都設置為text，3. 不設置hold-keyboaed為true

3、textarea穿透問題

問題：當有fixed元素時，無論設置多少z-index值，textarea組件都會穿透該fixed元素

機型：安卓偶現

玄學點：有時是不會出現的，但當我重新編譯、掃碼預覽時，就會出現textarea穿透問題，并且之后都會一直出現，但當我把小程序在手機上刪除后，重新編譯掃碼就有幾率不會出現該問題

解決辦法：當遇到需要fixed元素蓋住textarea時，可以當fixed元素出現時，將textarea隱藏或者變成view元素

4、綁定bindfocus事件

問題：當只給textarea綁定bindfocus事件，進入頁面先點擊textarea后，再馬上點擊input會觸發textarea的focus事件

機型：安卓偶現

解決辦法：可以通過focus去動態的控制textarea的聚焦情況，并且盡量不設置input的type為number類型

5、transition動畫

問題：在鍵盤抬起過程中如果通過bottom或translateY手動抬起page頁面時，并設置了transition動畫屬性，會導致textarea的placeholder閃動

機型：安卓必現

解決辦法： 判斷機型，ios添加transition屬性，安卓機器不添加transition屬性

6、點擊完成時

問題：textarea綁定bindkeyboardheightchange事件，并且使用了自帶的完成時，點擊完成時不會觸發bindkeyboardheightchange事件

機型：安卓偶現

解決辦法：未找到解決辦法

7、設置auto-height時

問題：當textarea的auto-height屬性為true時，會導致使用selectComponet獲取高度時出現問題，有時是沒有內容的一排初始高度，有時是textarea的默認高度

機型：ios和安卓

解決辦法：動態控制auto-height的值，或使用定時器延遲獲取高度

8、鍵盤高度獲取不一致

問題：多次觸發bindkeyboardchange事件，從事件中獲取的keyboardHeight高度不一致，有時是帶了完成的高度，有時是沒有帶完成的高度

機型：安卓偶現

解決辦法：未找到解決辦法

9、獲取數據精度問題

問題：通過selectComponet獲取元素的高寬或位置時，會默認保留全部小數，大概為16位，有幾率導致動畫出現混亂

機型：ios和安卓偶現

解決辦法：js語言本身就有精度問題，所以在通過selectComponent獲取到數據后，最好只保留兩位小數來進行處

感謝各位的閱讀，以上就是“微信小程序中textarea與input的問題怎么解決”的內容了，經過本文的學習后，相信大家對微信小程序中textarea與input的問題怎么解決這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！