微信小程序從入坑到放棄之坑八：textarea在蘋果手機中的大Bug

首次在這裏寫點東西，還請各位大佬擔待點。

摘要：
昨天的placeholder-class只是但願各位看官注意，而今天的textarea就絕對是一個超級大坑！並且若是看官手中沒有蘋果手機測試的話，這個可就真的是個坑了！爲啥？難道要等到用戶向你反饋大家產品有bug？？？......
上一篇的《微信小程序從入坑到放棄之坑七：input組件的佔位符placeholder》，沒啥大坑，而這篇的textarea可就不同了！這絕對是一個超大的Bug！！！

在上一節的設計稿中，詳細地址那塊兒就是一個textarea組件。如圖：

其餘無關的就不說了，咱們直接進入正題。

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

爲了便於觀察textarea組件的尺寸範圍，咱們給textarea設置一個背景色。如圖：
（一個帶背景色的textarea組件示例代碼一個帶背景色的textarea組件示例代碼）
而後保存後看下模擬器、安卓手機和蘋果手機中的效果吧。如圖：
（textarea在模擬器和安卓及蘋果手機上的效果textarea在模擬器和安卓及蘋果手機上的效果）

看到區別了嗎？若是沒有，再來張大圖。如圖：
（textarea在蘋果手機上距離頂部有空隙textarea在蘋果手機上距離頂部有空隙）

2、不就是個padding嗎？！

對於有前端基礎的看官來講，一眼就知道這是什麼緣由。是的，按照正常邏輯，這個空隙就是由padding引發的。

2.一、wxml代碼

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

代碼寫完了，咱們再用蘋果手機看下效果。如圖：
（微信小程序裏的textarea設置padding爲0時在蘋果手機中沒有生效）
微信小程序裏的textarea設置padding爲0時在蘋果手機中沒有生效能夠看到，此時這個padding:0在蘋果手機上並無生效！

奇了怪了，難道textarea不支持padding嗎？因而，我又將padding的值修改爲40px，此時在安卓手機上的效果以下：
（設置padding爲40時在安卓手機中有效設置padding爲40時在安卓手機中有效）
咱們能夠看到，此時安卓手機上是有效的，再來看看蘋果手機吧，如圖：
（設置padding爲40時在蘋果手機中也有效）
咦，怎麼又有效果了？！

那這個蘋果手機到底支持不支持微信小程序裏的textarea組件的padding屬性呢？要說不支持吧，修改爲40時也有效，要說支持吧，改爲0又無效！這就有點坑爹了！

3、微信小程序裏的textarea確實有bug

爲了便於測試，這回咱們直接測一組吧。效果如圖：
（測試發如今微信小程序中，蘋果手機對padding的值有臨界點）

看到了嗎？當值小於或等於0時，在蘋果手機中壓根就沒有任何反應！雖然正常的網頁中padding的值是不能爲負的！但此時連0!important都無能爲力！！！

4、此坑有什麼影響

可能有些看官還不知道這坑有什麼影響，拿咱們的設計稿來講。咱們寫的頁面總得與設計稿一致吧！那些如今問題就來了，這個textarea組件在安卓和蘋果上的表現都不同，要想在兩種手機上展示效果同樣，必須得對蘋果單獨處理才行！不然，咱們在安卓上佈局是好的，到了蘋果手機上面，就已經錯位了！因此，這就是個超級大坑！要不是由於藝靈我用二手的iphone 6s測試，這個bug估計還不知道何時才能知道呢！若是是等到用戶反饋才知道，這但是件多麼坑爹的事情！！！

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

看官可能會說：「都什麼年代了，藝靈你還用個破6s來測試！」

行，爲了驗證此bug並不是只是iphone 6s纔有，因而我又召喚了個人小夥伴們。聊天如圖：
（微信小程序中textarea的內邊距bug在iphone各版本上都存在）

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

6、如何解決？

搞過微信小程序的看官都知道，在小程序裏面不像正常網頁那樣能夠隨便寫js，在這裏一切都要受限制！

微信小程序官方也有對應的文檔，文檔地址：
developers.weixin.qq.com/miniprogram/dev/api/system/system-info/wx.getSystemInfo.html?search-key=wx.getSystemInfo 。官方的文檔向來都這樣，要麼不給案例，要麼就簡短的寫下。如今的機型那麼多，鬼知道怎麼判斷啊！因而我又在網上搜索後找到了現成的判斷小程序是用安卓仍是IOS打開的方法，原文地址：blog.csdn.net/niesiyuan000/article/details/80325988。

順便補充一句，微信官方提供的判斷依舊不全面，最新出來的蘋果手機尚未徹底支持！相關的坑能夠在官方社區的問答中找到。坑！坑！坑！坑！坑！坑！坑！