微信小程式中textarea與input所有的玄學問題
前言
微信小程式中，有兩個原生元件textarea和input，這兩個元件單獨只用一個時，是沒有什麼問題的，但是當他們兩個一起出現時，問題就接踵而來，並且都是些很玄學的問題，我在開發時就遇到了這些玄學的問題，一個簡單的表單填寫頁面，只是為了實現一個手動實現頁面上推的功能，硬是讓我搞了好幾天才弄好！
效果圖：
思考
在我把這些玄學問題通過特殊方式解決後，我思考了很多很多 - 為什麼textarea和input組合在一起使用時為什麼會有這些玄學問題？ - 我明明是正常的寫法，為什麼ios手機可以，到安卓機就不行了？ - 為什麼有些時候可以有些時候又不可以？
...等等等等
為了以後不在這些問題上走彎路，所以我決定好好的去探索一番，textarea與input的相愛相殺
測試機器
本次探索所用到的機器為
安卓機器：榮耀20，小米10s；
ios機器：iPhone13
玄學問題來了！
1、繫結bindkeyboardheightchange事件
- 問題：只為
textarea繫結bindkeyboardheightchange事件，input也會觸發textarea的bindkeyboardheightchange事件，並且觸發所攜帶的引數都是textarea上面的引數 - 機型：安卓必現
- 示例gif:
- 解決辦法：未找到解決辦法
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獲取到資料後，最好只保留兩位小數來進行處理
結語
程式碼都是很正常的寫法，想自己在驗證下的朋友可以在我的程式碼倉庫拉下來，去驗證一下，裡面還有很多我在開發中遇到的問題、封裝的元件和總結的經驗，如果覺得幫助到你了，請給一個star吧！
如果大家有遇到其他坑或者玄學問題，可以評論出來，一起討論並總結，避免以後在遇到這些問題時，少走一些彎路。
「其他文章」