解决小程序textarea在安卓和ios上padding不一的问题

解决小程序textarea在安卓和ios上padding不一的问题,第1张

1.做小程序表单的时候上下要对齐一个文本域和input输入框,没想到小程序的textarea在android和ios上差距这么明显,如下图,本来之前遇到这个问题的时候,设置了margin和padding之后就解决了,但是在小程序上发现设置padding和margin设置为0也没用,还是去不掉android和ios表现不一的问题,于是研究了一番还是给收拾好了,下面先上问题图:

从上面两图可以看出来这个文本域差别也太大了,这效果要是说一样的话也太牵强了,于是调整了下margin、padding的,发现并没有什么用,而且这个textarea的间距在ios上大的有点离谱了,即使android和ios不要求一样,但是单一个ios上面的间距也是明显的大,难看,好,下面写下自己的解决办法,先上两张效果图 :

下面写实现过程:

js文件:

Page({

  data: {

    detail:false,

  },

  onLoad: function (options) {

    var phone = wx.getSystemInfoSync()  //调用方法获取机型

    var that = this

    if (phone.platform == 'ios') {

      that.setData({

        detail: true

      })

    } else if (phone.platform == 'android') {

      that.setData({

        detail: false

      })

    }

  },

  onReady: function () {

  },

  onShow: function () {

  },

  onHide: function () {

  },

  onUnload: function () {

  },

  onPullDownRefresh: function () {

  },

  onReachBottom: function () {

  },

  onShareAppMessage: function () {

  }

})

wxml文件:

<view class='xingdongDescript'>

<view class='xingdongNameBox'><view>行动名称</view><input placeholder='请输入' /></view>

<view class='xingdongjieshaoBox'><view class='xingdongjieshao'>行动介绍</view><view class="{{detail ? 'iostextarea'  : 'androidtextarea'}}"><textarea placeholder='请输入' /></view></view></view>

wxss文件:

.xingdongDescript{

  background: white

  padding: 0 0 0 30rpx

  box-sizing: border-box

  width: 100%

  height: 285rpx

}

.xingdongNameBox{

  width: 100%

  height: 88rpx

  overflow: hidden

  padding: 0 20rpx 0 0

  box-sizing: border-box

  border-bottom: 1rpx solid #E5E5E5

}

.xingdongNameBox view{

  width: 25%

  height: 88rpx

  line-height: 88rpx

  float: left

  color: #000000

  font-size: 34rpx

}

.xingdongNameBox input{

  width: 75%

  height: 88rpx

  line-height: normal

  float: left

  font-size: 34rpx

  color: #000000

}

.xingdongjieshaoBox{

  width: 100%

  height: 197rpx

  overflow: hidden

  padding: 0 20rpx 0 0

  box-sizing: border-box

  position: relative

}

.xingdongjieshaoBox .xingdongjieshao{

  width: 25%

  height: 88rpx

  line-height: 88rpx

  float: left

  color: #000000

  font-size: 34rpx

  position: absolute

  top: 0

  left: 0

}

.iostextarea{

  position: absolute

  left: 24.3%

  top: 1rpx

  margin-left: -11rpx

  width: 73%

  height: 197rpx

}

.iostextarea textarea{

  position: absolute

  width: 100%

  height: 100%

  font-size: 34rpx

}

.androidtextarea{

  position: absolute

  left: 24.3%

  width: 73%

  height: 197rpx

}

.androidtextarea textarea{

  width: 100%

  height: 197rpx

  float: left

  padding: 22rpx 0 0 0

  box-sizing: border-box

  font-size: 34rpx

}

至此,实现想要的效果。

需要输入代码。

表格文字左对齐,如:

<tablewidth="100%"border="1"cellspacing="1"cellpadding="0">

<tr>

<tdheight="66"align="left"valign="middle">aa</td>

<tdalign="center"valign="middle">bb</td>

</tr>

<tr>

<tdheight="74"align="left"valign="middle">aa</td>

<tdalign="center"valign="middle">bb</td>

</tr>

<tr>

<tdheight="83"align="left"valign="middle">aa</td>

<tdalign="center"valign="middle">bb</td>

注意事项:

*** 作方法:

1、新建html文件,在body标签中添加textarea标签,为这个标签设置一个id,这里以“demo”为例,然后在标签内输入一些内容:

2、引入jQuery文件,然后添加script标签,添加代码“$('#demo').text()”,然后将jQuery获取到的值进行alert输出:

3、这时网页就会d出jQuery获取到的textarea文本域的值,可以将这个值赋值给变量以方便调用:


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/8110482.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-13
下一篇 2023-04-13

发表评论

登录后才能评论

评论列表(0条)

保存