首次(ci)在這里寫點(dian)東(dong)西，還請各位大佬擔待點(dian)。

摘要：
昨天的placeholder-class只是希望各位看官注意，而今天的textarea就絕對是一個超級大坑！而且如果看官手中沒有蘋果手機測試的話，這個可就真的是個坑了！為啥？難道要等到用戶向你反饋你們產品有bug？？？......
上一(yi)(yi)篇的(de)《微(wei)信小程序從入(ru)坑(keng)到放棄之坑(keng)七(qi)：input組(zu)件的(de)占位符placeholder》，沒啥(sha)大坑(keng)，而這(zhe)篇的(de)textarea可就(jiu)不一(yi)(yi)樣了！這(zhe)絕(jue)對是一(yi)(yi)個(ge)超大的(de)Bug！！！

在上一節(jie)的設(she)計稿中，詳細地(di)址那塊兒(er)就(jiu)是(shi)一個textarea組件。如圖：

其他無關的(de)就不說了，我們直接進入正題(ti)。

一、textarea在模擬器、安卓和蘋果中的效果

為(wei)了便于觀(guan)察textarea組(zu)件的尺寸范圍，我們(men)給textarea設(she)置(zhi)一個背景色。如圖：

（一個帶背景色的textarea組件示例代碼一個帶背景色的textarea組件示例代碼）
然后保存后看下模擬器、安卓手(shou)機和蘋果手(shou)機中的效果吧。如圖(tu)：

（textarea在模擬(ni)(ni)器和安卓及(ji)蘋(pin)果手機(ji)上(shang)(shang)的(de)效(xiao)果textarea在模擬(ni)(ni)器和安卓及(ji)蘋(pin)果手機(ji)上(shang)(shang)的(de)效(xiao)果）

看到(dao)區別了嗎？如果沒有，再來(lai)張大(da)圖(tu)(tu)。如圖(tu)(tu)：

（textarea在(zai)蘋果(guo)手機上(shang)距離頂部有空隙textarea在(zai)蘋果(guo)手機上(shang)距離頂部有空隙）

二、不就是個padding嗎？！

對于有前(qian)端(duan)基礎的看官來說，一眼就(jiu)知道(dao)這(zhe)是(shi)什么原因(yin)。是(shi)的，按照正常邏輯，這(zhe)個(ge)空隙就(jiu)是(shi)由(you)padding引起(qi)的。

2.1、wxml代碼

<textarea style="background:#666;padding:0" value="加padding就有用了嗎？"></textarea>

代碼寫完了，我們再用蘋果手機看下效果。如圖：

（微信小程序里的textarea設置padding為0時在蘋果手機中沒有生效）
微信小程(cheng)序里的textarea設(she)置padding為0時在蘋果(guo)手機(ji)中沒(mei)有生效可以看到，此時這個padding:0在蘋果(guo)手機(ji)上并(bing)沒(mei)有生效！

奇了怪了，難(nan)道(dao)textarea不支持padding嗎？于(yu)是，我又將(jiang)padding的值修改(gai)成40px，此時(shi)在安卓手機上的效果如下：

（設置padding為40時在安卓手機中有效設置padding為40時在安卓手機中有效）
我(wo)們可以看(kan)到，此時安(an)卓(zhuo)手機上(shang)是有效(xiao)的(de)，再(zai)來看(kan)看(kan)蘋果手機吧(ba)，如圖：

（設置padding為40時在蘋果手機中也有效）
咦，怎么(me)又有效(xiao)果了(le)？！

那這(zhe)個蘋果手機到底(di)支(zhi)持(chi)(chi)不支(zhi)持(chi)(chi)微信小程序里的(de)(de)textarea組(zu)件的(de)(de)padding屬性呢(ni)？要說不支(zhi)持(chi)(chi)吧(ba)，修改成40時也(ye)有效(xiao)，要說支(zhi)持(chi)(chi)吧(ba)，改成0又無效(xiao)！這(zhe)就有點坑(keng)爹了！

三、微信小程序里的textarea確實有bug

為了(le)便于測試，這回我們直接測一組吧(ba)。效果如圖：

（測試(shi)發現(xian)在微信(xin)小程序中，蘋(pin)果手機對padding的值有臨界(jie)點）

看到(dao)了嗎？當值小于(yu)或等(deng)于(yu)0時，在(zai)蘋果(guo)手機中壓根就沒有任何反(fan)應(ying)！雖然正(zheng)常(chang)的(de)網頁中padding的(de)值是(shi)不能為負的(de)！但(dan)此時連0!important都無能為力(li)！！！

四、此坑有什么影響

可(ke)能有(you)些看官(guan)還不知道這(zhe)(zhe)坑(keng)有(you)什么(me)影響，拿我(wo)們(men)(men)的(de)設計(ji)稿來說。我(wo)們(men)(men)寫的(de)頁面總(zong)得與設計(ji)稿一致吧(ba)！那些現在(zai)問題就(jiu)來了，這(zhe)(zhe)個(ge)textarea組件(jian)在(zai)安卓(zhuo)和蘋果上的(de)表現都(dou)不一樣(yang)，要(yao)想在(zai)兩種手機上展現效果一樣(yang)，必(bi)須得對蘋果單獨處理才(cai)(cai)行！否則，我(wo)們(men)(men)在(zai)安卓(zhuo)上布局(ju)是(shi)好的(de)，到(dao)了蘋果手機上面，就(jiu)已經錯位了！所以，這(zhe)(zhe)就(jiu)是(shi)個(ge)超級(ji)大坑(keng)！要(yao)不是(shi)因為藝靈我(wo)用二手的(de)iphone 6s測試，這(zhe)(zhe)個(ge)bug估(gu)計(ji)還不知道什么(me)時候才(cai)(cai)能知道呢！如果是(shi)等到(dao)用戶(hu)反饋才(cai)(cai)知道，這(zhe)(zhe)可(ke)是(shi)件(jian)多么(me)坑(keng)爹的(de)事情(qing)！！！

五、微信小程序中textarea內邊距的坑通吃iphone各版本

看(kan)官可(ke)能會說：“都(dou)什(shen)么(me)年(nian)代(dai)了，藝靈你(ni)還(huan)用個破6s來測(ce)試！”

行，為了驗證(zheng)此(ci)bug并非(fei)只是(shi)iphone 6s才有，于(yu)是(shi)我(wo)又(you)召喚了我(wo)的小伙伴們。聊(liao)天如圖：

（微信小程序中textarea的內邊距bug在(zai)iphone各版本上都(dou)存在(zai)）

這回就問你服不服，iphone X，壕不？X都陣亡了！！！

六、如何解決？

搞過微信小程(cheng)序的看(kan)官都知道，在小程(cheng)序里(li)面不像(xiang)正常網(wang)頁那樣(yang)可以隨便寫js，在這里(li)一切都要受限制！

微信小程序官方也有對應的文檔，文檔地址：
developers.weixin.qq.com/miniprogram/dev/api/system/system-info/wx.getSystemInfo.html?search-key=wx.getSystemInfo 。官方的(de)文檔向來都(dou)這樣，要么不給案(an)例，要么就簡短的(de)寫下。現(xian)(xian)在的(de)機型那么多，鬼知道怎么判斷(duan)啊！于(yu)是(shi)我(wo)又在網上(shang)搜(sou)索(suo)后(hou)找到了現(xian)(xian)成的(de)判斷(duan)小(xiao)程(cheng)序是(shi)用安卓還是(shi)IOS打開(kai)的(de)方法

順便補充一句，微(wei)信官(guan)方提(ti)供的(de)判(pan)斷依舊不全面，最(zui)新出來的(de)蘋果(guo)手機還沒有(you)完全支持(chi)！相關的(de)坑(keng)可以在官(guan)方社區的(de)問(wen)答中找到。坑(keng)！坑(keng)！坑(keng)！坑(keng)！坑(keng)！坑(keng)！坑(keng)！