本篇文章給大家帶來了關于微信小程序的相關知識，其中主要介紹了關于小程序中textarea與input的問題總結，這兩個組件單獨只用一個時，是沒有什么問題的，但是當他們兩個一起出現時，問題就接踵而來，下面一起來看一下，希望對大家有幫助。
微信小程序中，有兩個原生組件textarea和input，這兩個組件單獨只用一個時，是沒有什么問題的，但是當他們兩個一起出現時，問題就接踵而來，并且都是些很玄學的問題，我在開發時就遇到了這些玄學的問題，一個簡單的表單填寫頁面，只是為了實現一個手動實現頁面上推的功能，硬是搞了好幾天才弄好！
效果圖：
思考
在我把這些玄學問題通過特殊方式解決后，我思考了很多很多
為什么textarea和input組合在一起使用時為什么會有這些玄學問題？
我明明是正常的寫法，為什么ios手機可以，到安卓機就不行了？
為什么有些時候可以有些時候又不可以？
...等等等等
為了以后不在這些問題上走彎路，所以我決定好好的去探索一番，textarea與input的相愛相殺
測試機器
本次探索所用到的機器為
安卓機器：榮耀20，小米10s；
ios機器：iPhone13
玄學問題來了！
1、綁定bindkeyboardheightchange事件
問題：只為textarea綁定bindkeyboardheightchange事件，input也會觸發textarea的bindkeyboardheightchange事件，并且觸發所攜帶的參數都是textarea上面的參數
機型：安卓必現
示例:
解決辦法：未找到解決辦法
2、設置hold-keyboaed為true時
問題：當把textarea和input的hold-keyboaed屬性設置為true時，并且input中有一個type不為text時,連續切換會把鍵盤上方的完成卡住，并且不會再聚焦textarea
機型：安卓必現
示例gif:
解決辦法：1. 通過show-confirm-bar不顯示textarea鍵盤抬起時上方的完成按鈕，2. input的type都設置為text，3. 不設置hold-keyboaed為true
3、textarea穿透問題
問題：當有fixed元素時，無論設置多少z-index值，textarea組件都會穿透該fixed元素
機型：安卓偶現
玄學點：有時是不會出現的，但當我重新編譯、掃碼預覽時，就會出現textarea穿透問題，并且之后都會一直出現，但當我把小程序在手機上刪除后，重新編譯掃碼就有幾率不會出現該問題
示例gif:
解決辦法：當遇到需要fixed元素蓋住textarea時，可以當fixed元素出現時，將textarea隱藏或者變成view元素
4、綁定bindfocus事件
問題：當只給textarea綁定bindfocus事件，進入頁面先點擊textarea后，再馬上點擊input會觸發textarea的focus事件
機型：安卓偶現
示例gif:
解決辦法：可以通過focus去動態的控制textarea的聚焦情況，并且盡量不設置input的type為number類型
5、transition動畫
問題：在鍵盤抬起過程中如果通過bottom或translateY手動抬起page頁面時，并設置了transition動畫屬性，會導致textarea的placeholder閃動
機型：安卓必現
示例gif:
解決辦法： 判斷機型，ios添加transition屬性，安卓機器不添加transition屬性
6、點擊完成時
問題：textarea綁定bindkeyboardheightchange事件，并且使用了自帶的完成時，點擊完成時不會觸發bindkeyboardheightchange事件
機型：安卓偶現
示例gif:
解決辦法：未找到解決辦法
7、設置auto-height時
問題：當textarea的auto-height屬性為true時，會導致使用selectComponet獲取高度時出現問題，有時是沒有內容的一排初始高度，有時是textarea的默認高度
機型：ios和安卓
解決辦法：動態控制auto-height的值，或使用定時器延遲獲取高度
8、鍵盤高度獲取不一致
問題：多次觸發bindkeyboardchange事件，從事件中獲取的keyboardHeight高度不一致，有時是帶了完成的高度，有時是沒有帶完成的高度
機型：安卓偶現
解決辦法：未找到解決辦法
9、獲取數據精度問題
問題：通過selectComponet獲取元素的高寬或位置時，會默認保留全部小數，大概為16位，有幾率導致動畫出現混亂
機型：ios和安卓偶現
解決辦法：js語言本身就有精度問題，所以在通過selectComponent獲取到數據后，最好只保留兩位小數來進行處
