摘要:
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、常规的解决方案
说到这里,略懂前端代码的看官都知道,想要实现上面的效果至少有两种方法。
- 法一:
padding-left:12rpx
;设置textarea的左内边距值 - 法二:
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
在苹果手机中是无效的ÿ