微信小程序从入坑到放弃二十三：都0202年了，textarea在ios上的bug咋还未修复呢？

摘要：
2018年的时候，艺灵接单时搞过微信小程序。当时在写地址页时碰到了一个bug，主要是针对ios设备的。即：textarea有最小的padding且不可被设置。当时的解决方法是利用wx.getSystemInfo这个API获取设备信息，然后做进一步的兼容处理…

一、光阴似箭，日月如梭

记得在2018年时，艺灵的《微信小程序从入坑到放弃之坑八：textarea在苹果手机中的大Bug》这篇文章中有提到过微信小程序的textarea在苹果手机上是有坑的。一眨眼，现在都0202年了，没想到这个bug依然存在！微信官方这是已经放弃治疗了吗？[:笑哭][:笑哭][:笑哭]

二、复现bug

如果看官还没有阅读《微信小程序从入坑到放弃之坑八：textarea在苹果手机中的大Bug》这篇文章的话，建议先阅读一下，了解下当时的场景。没有阅读过的也没关系，在这篇笔记中，艺灵会详细的介绍这个bug。都说有图有真相，咱们先来上图看下bug长什么样子吧！如图：textarea组件在安卓和苹果手机中的默认样式.png
现在看来，好像并没有什么问题对吧！那我们再来输入一些文字后对比一下可好？上图！textarea组件在安卓和苹果手机中输入内容后的样式.png

2.1、发现不同

可能很多看官还是没有get到上面图片想表示啥，仔细看红框框的地方。为了更清楚的突出问题，再来张局部特写照。如图：textarea组件在安卓和苹果手机中输入内容后的局部特写.png
此时，我们已经能很明显的看出区别了。同样的代码，在苹果手机和安卓手机上输入内容后问题就出现了，是不是很神奇？？？

2.2、精准误差

前面的图片中还有一个重要信息一直没有用到，是什么呢？就是文本框前面的2rpx、6rpx、12rpx等色块。这是用来干嘛的呢？方便测量输入框中的文字离左侧的距离。如图：textarea组件设置相同属性后在苹果和安卓手机中左侧的距离不一致.png
现在，我们已经能很明显的看出textarea组件在苹果手机上的区别了。但是新的问题又出现了，到底是10rpx还是12rpx呢？仔细看图，安卓的离左侧也有一点空隙，若以安卓的为准，左侧有一点点空隙是正常的，那么在苹果手机上的差值则为10rpx；若以12rpx为准，但那个汉字一的左侧有点虚。所以，为了保险起见，艺灵个人认为此处的差值是10rpx。特别说明下，此处的截图用手机传图时选择的是原图哈~

2.3、常规的解决方案

说到这里，略懂前端代码的看官都知道，想要实现上面的效果至少有两种方法。

1. 法一：padding-left:12rpx；设置textarea的左内边距值
2. 法二：padding-left: 0;text-indent: 12rpx；设置textarea的左内边距值 + 文本缩进

那既然答案已经出来了，这篇文章是不是就到此结束了呢？骚年，太天真了吧！！！如图：textarea已经设置了padding属性值为0了哦~.png

三、不服？代码测到你服为止！

3.1、padding大法

有看官要说了：你只展示了wxml页面的代码，谁知道你的wxss中有没有搞鬼呢？有本事你加个!important。

不服？！没关系，有图有真相！上图：padding添加了!important属性后在苹果手机中的效果.png
看到了没有，强大的!important在这里也变得一点儿用都没有。看官这下服了吧！2018年的文章可不是白写的，当时没少测试。[:笑哭]

3.2、text-indent大法

既然直接修改padding:0在苹果手机中是无效的，那我使用text-indent呢ÿ