本篇文章給大家?guī)?lái)了關(guān)于微信小程序的相關(guān)知識(shí)，其中主要介紹了關(guān)于小程序中textarea與input的問題總結(jié)，這兩個(gè)組件單獨(dú)只用一個(gè)時(shí)，是沒有什么問題的，但是當(dāng)他們兩個(gè)一起出現(xiàn)時(shí)，問題就接踵而來(lái)，下面一起來(lái)看一下，希望對(duì)大家有幫助。

【相關(guān)學(xué)習(xí)推薦：小程序?qū)W習(xí)教程】

微信小程序中，有兩個(gè)原生組件textarea和input，這兩個(gè)組件單獨(dú)只用一個(gè)時(shí)，是沒有什么問題的，但是當(dāng)他們兩個(gè)一起出現(xiàn)時(shí)，問題就接踵而來(lái)，并且都是些很玄學(xué)的問題，我在開發(fā)時(shí)就遇到了這些玄學(xué)的問題，一個(gè)簡(jiǎn)單的表單填寫頁(yè)面，只是為了實(shí)現(xiàn)一個(gè)手動(dòng)實(shí)現(xiàn)頁(yè)面上推的功能，硬是搞了好幾天才弄好！

效果圖：

思考

在我把這些玄學(xué)問題通過特殊方式解決后，我思考了很多很多

• 為什么textarea和input組合在一起使用時(shí)為什么會(huì)有這些玄學(xué)問題？

• 我明明是正常的寫法，為什么ios手機(jī)可以，到安卓機(jī)就不行了？

• 為什么有些時(shí)候可以有些時(shí)候又不可以？

...等等等等

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

測(cè)試機(jī)器

本次探索所用到的機(jī)器為

安卓機(jī)器：榮耀20，小米10s；

ios機(jī)器：iPhone13

玄學(xué)問題來(lái)了！

1、綁定bindkeyboardheightchange事件

問題：只為textarea綁定bindkeyboardheightchange事件，input也會(huì)觸發(fā)textarea的bindkeyboardheightchange事件，并且觸發(fā)所攜帶的參數(shù)都是textarea上面的參數(shù)

機(jī)型：安卓必現(xiàn)

示例:

解決辦法：未找到解決辦法

2、設(shè)置hold-keyboaed為true時(shí)

問題：當(dāng)把textarea和input的hold-keyboaed屬性設(shè)置為true時(shí)，并且input中有一個(gè)type不為text時(shí),連續(xù)切換會(huì)把鍵盤上方的完成卡住，并且不會(huì)再聚焦textarea

機(jī)型：安卓必現(xiàn)

示例gif:

解決辦法：1. 通過show-confirm-bar不顯示textarea鍵盤抬起時(shí)上方的完成按鈕，2. input的type都設(shè)置為text，3. 不設(shè)置hold-keyboaed為true

3、textarea穿透問題

問題：當(dāng)有fixed元素時(shí)，無(wú)論設(shè)置多少z-index值，textarea組件都會(huì)穿透該fixed元素

機(jī)型：安卓偶現(xiàn)

玄學(xué)點(diǎn)：有時(shí)是不會(huì)出現(xiàn)的，但當(dāng)我重新編譯、掃碼預(yù)覽時(shí)，就會(huì)出現(xiàn)textarea穿透問題，并且之后都會(huì)一直出現(xiàn)，但當(dāng)我把小程序在手機(jī)上刪除后，重新編譯掃碼就有幾率不會(huì)出現(xiàn)該問題

示例gif:

解決辦法：當(dāng)遇到需要fixed元素蓋住textarea時(shí)，可以當(dāng)fixed元素出現(xiàn)時(shí)，將textarea隱藏或者變成view元素

4、綁定bindfocus事件

問題：當(dāng)只給textarea綁定bindfocus事件，進(jìn)入頁(yè)面先點(diǎn)擊textarea后，再馬上點(diǎn)擊input會(huì)觸發(fā)textarea的focus事件

機(jī)型：安卓偶現(xiàn)

示例gif:

解決辦法：可以通過focus去動(dòng)態(tài)的控制textarea的聚焦情況，并且盡量不設(shè)置input的type為number類型

5、transition動(dòng)畫

問題：在鍵盤抬起過程中如果通過bottom或translateY手動(dòng)抬起page頁(yè)面時(shí)，并設(shè)置了transition動(dòng)畫屬性，會(huì)導(dǎo)致textarea的placeholder閃動(dòng)

機(jī)型：安卓必現(xiàn)

示例gif:

解決辦法： 判斷機(jī)型，ios添加transition屬性，安卓機(jī)器不添加transition屬性

6、點(diǎn)擊完成時(shí)

問題：textarea綁定bindkeyboardheightchange事件，并且使用了自帶的完成時(shí)，點(diǎn)擊完成時(shí)不會(huì)觸發(fā)bindkeyboardheightchange事件

機(jī)型：安卓偶現(xiàn)

示例gif:

解決辦法：未找到解決辦法

7、設(shè)置auto-height時(shí)

問題：當(dāng)textarea的auto-height屬性為true時(shí)，會(huì)導(dǎo)致使用selectComponet獲取高度時(shí)出現(xiàn)問題，有時(shí)是沒有內(nèi)容的一排初始高度，有時(shí)是textarea的默認(rèn)高度

機(jī)型：ios和安卓

解決辦法：動(dòng)態(tài)控制auto-height的值，或使用定時(shí)器延遲獲取高度

8、鍵盤高度獲取不一致

問題：多次觸發(fā)bindkeyboardchange事件，從事件中獲取的keyboardHeight高度不一致，有時(shí)是帶了完成的高度，有時(shí)是沒有帶完成的高度

機(jī)型：安卓偶現(xiàn)

解決辦法：未找到解決辦法

9、獲取數(shù)據(jù)精度問題

問題：通過selectComponet獲取元素的高寬或位置時(shí)，會(huì)默認(rèn)保留全部小數(shù)，大概為16位，有幾率導(dǎo)致動(dòng)畫出現(xiàn)混亂

機(jī)型：ios和安卓偶現(xiàn)

解決辦法：js語(yǔ)言本身就有精度問題，所以在通過selectComponent獲取到數(shù)據(jù)后，最好只保留兩位小數(shù)來(lái)進(jìn)行處

【相關(guān)學(xué)習(xí)推薦：小程序?qū)W習(xí)教程】

以上是微信小程序中textarea與input的問題總結(jié)的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！