微信小程式中textarea與input所有的玄學問題

語言: CN / TW / HK

前言

微信小程式中,有兩個原生元件textareainput,這兩個元件單獨只用一個時,是沒有什麼問題的,但是當他們兩個一起出現時,問題就接踵而來,並且都是些很玄學的問題,我在開發時就遇到了這些玄學的問題,一個簡單的表單填寫頁面,只是為了實現一個手動實現頁面上推的功能,硬是讓我搞了好幾天才弄好!

效果圖:

86065a169cfd1b40e8804419793e8c2d.gif

思考

在我把這些玄學問題通過特殊方式解決後,我思考了很多很多 - 為什麼textareainput組合在一起使用時為什麼會有這些玄學問題? - 我明明是正常的寫法,為什麼ios手機可以,到安卓機就不行了? - 為什麼有些時候可以有些時候又不可以?

...等等等等

為了以後不在這些問題上走彎路,所以我決定好好的去探索一番,textarea與input的相愛相殺

測試機器

本次探索所用到的機器為

安卓機器:榮耀20,小米10s

ios機器:iPhone13

玄學問題來了!

1、繫結bindkeyboardheightchange事件

  • 問題:只為textarea繫結bindkeyboardheightchange事件,input也會觸發textareabindkeyboardheightchange事件,並且觸發所攜帶的引數都是textarea上面的引數
  • 機型:安卓必現
  • 示例gif:

1.gif - 解決辦法:未找到解決辦法

2、設定hold-keyboaed為true時

  • 問題:當把textareainputhold-keyboaed屬性設定為true時,並且input中有一個type不為text時,連續切換會把鍵盤上方的完成卡住,並且不會再聚焦textarea
  • 機型:安卓必現
  • 示例gif: 2.gif
  • 解決辦法:1. 通過show-confirm-bar不顯示textarea鍵盤抬起時上方的完成按鈕,2. inputtype都設定為text,3. 不設定hold-keyboaedtrue

3、textarea穿透問題

  • 問題:當有fixed元素時,無論設定多少z-index值,textarea元件都會穿透該fixed元素
  • 機型:安卓偶現
  • 玄學點:有時是不會出現的,但當我重新編譯、掃碼預覽時,就會出現textarea穿透問題,並且之後都會一直出現,但當我把小程式在手機上刪除後,重新編譯掃碼就有機率不會出現該問題
  • 示例gif: 3.gif
  • 解決辦法:當遇到需要fixed元素蓋住textarea時,可以當fixed元素出現時,將textarea隱藏或者變成view元素

4、繫結bindfocus事件

  • 問題:當只給textarea繫結bindfocus事件,進入頁面先點選textarea後,再馬上點選input會觸發textareafocus事件
  • 機型:安卓偶現
  • 示例gif:

4.gif - 解決辦法:可以通過focus去動態的控制textarea的聚焦情況,並且儘量不設定inputtypenumber型別

5、transition動畫

  • 問題:在鍵盤抬起過程中如果通過bottomtranslateY手動抬起page頁面時,並設定了transition動畫屬性,會導致textareaplaceholder閃動
  • 機型:安卓必現
  • 示例gif:

5.gif - 解決辦法: 判斷機型,ios新增transition屬性,安卓機器不新增transition屬性

6、點選完成時

  • 問題:textarea繫結bindkeyboardheightchange事件,並且使用了自帶的完成時,點選完成時不會觸發bindkeyboardheightchange事件
  • 機型:安卓偶現
  • 示例gif:

6.gif - 解決辦法:未找到解決辦法

7、設定auto-height時

  • 問題:textareaauto-height屬性為true時,會導致使用selectComponet獲取高度時出現問題,有時是沒有內容的一排初始高度,有時是textarea的預設高度
  • 機型:ios和安卓
  • 解決辦法:動態控制auto-height的值,或使用定時器延遲獲取高度

8、鍵盤高度獲取不一致

  • 問題:多次觸發bindkeyboardchange事件,從事件中獲取的keyboardHeight高度不一致,有時是帶了完成的高度,有時是沒有帶完成的高度
  • 機型:安卓偶現
  • 解決辦法:未找到解決辦法

9、獲取資料精度問題

  • 問題:通過selectComponet獲取元素的高寬或位置時,會預設保留全部小數,大概為16位,有機率導致動畫出現混亂
  • 機型:ios和安卓偶現
  • 解決辦法:js語言本身就有精度問題,所以在通過selectComponent獲取到資料後,最好只保留兩位小數來進行處理

結語

程式碼都是很正常的寫法,想自己在驗證下的朋友可以在我的程式碼倉庫拉下來,去驗證一下,裡面還有很多我在開發中遇到的問題、封裝的元件和總結的經驗,如果覺得幫助到你了,請給一個star吧!

本文首發部落格連結地址

如果大家有遇到其他坑或者玄學問題,可以評論出來,一起討論並總結,避免以後在遇到這些問題時,少走一些彎路。