小程序里头textarea在安卓和iOS下的兼容性问题

最新推荐文章于 2024-08-20 23:45:00 发布

zlx_2018

最新推荐文章于 2024-08-20 23:45:00 发布

阅读量1.3k

点赞数 1

文章标签：小程序

本文链接：https://blog.csdn.net/zlx_2018/article/details/120016419

版权

小程序里头textarea在安卓和iOS下的兼容性问题

我最近才发现的一个问题，真令人头秃~~~~
事儿是这样的，我负责编写的页面中有一个textarea输入框，当时没当回事儿，我自己测试的时候用自己手机测试了样式没问题（iPhoneX），结果提交之后测试测了跟我说没有对齐，需要优化，我就蒙了，她用的是安卓机，我一看确实错开了，如下图：

错误图片
然后就开始漫长的寻找，走了一点点弯路，现在记录一下，以防我下次还忘记.
主要思路是先获取机型是安卓还是iOS（注意一点：在微信开发者工具中看到的是devtools），赋值一个布尔变量，然后根据这个变量给textarea不同的class.
上内容：
js:

 data:{
	detail:false
 },
 onLoad: function (options) {
   var phone = wx.getSystemInfoSync();  //重点 ： 调用方法获取机型
   if (phone.platform == 'ios') {
     this.setData({
       detail: true
     });
   } else if (phone.platform == 'android') {
     this.setData({
       detail: false
     });
   }
   
 },

wxss：

.area{
  width: 100%;
  height: 300rpx;
  position: relative;
  display: flex;
  align-items: flex-start;
}
.area>text{
  width: 45px;
  padding-top: 10px;
}
.ios {
  position: absolute;
  top: 8rpx;
  margin-left: -11rpx;
  right: 55rpx;
  width: calc(100% - 160rpx);
  height: 100%;
}
.ios textarea {
  position: absolute;
  width: 100%;
  height: 100%;
  font-size: 30rpx;
}
.android {
  position: absolute;
  right: 50rpx;
  width: calc(100% - 160rpx);
  height: 100%;
}

.android textarea {
  width: 100%;
  height: 100%;
  float: left;
  padding: 22rpx 0 0 0;
  box-sizing: border-box;
  font-size: 30rpx;
}

wxml：

<view class="area">
   <text><text class="red">*</text>内容</text>
   <view class="{{detail ? 'ios'  : 'android'}}">
   		<textarea placeholder="请描述你的问题，以便我们尽快为您处理" value="{{content}}" maxlength="300"  bindinput="bindChange"></textarea>			
   </view>   	
 </view>