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