微信小程式中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獲取到資料後，最好只保留兩位小數來進行處
【相關學習推薦：】
以上就是微信小程式中textarea與input的問題總結的詳細內容，更多請關注TW511.COM其它相關文章！
