输入代码
<textarea class="weui-textarea" placeholder="请输入文本" style="height: 3.3em" />
就可以设置了。
微信小程序 textarea 不可行的原因和简易解决方案
微信小程序中textarea没有bindchange事件，所以无法在输入时给变量赋值。
虽然可以使用bindblur事件，但是绑定bindblur事件，如果再点击按钮，则先执行完按钮事件唯帆拆后，再去执行bindblur事件，所以在js文件取不到输入值。
解决方法：结合from表单，textarea文本框输入后，再去点击提交按钮，这时会先执行textarea事件（获取文本框输入内容），再去执行数据提指枣交，这样问题就解决了。
2.wxml文件代码
3.js文件代码轿困
这里遇到的问题，是动态textarea列表，底部提交按钮position：fiexd悬浮。在滑动页面，textarea文本框友仿中的文字会穿透到提交按钮上方，显示出来。这个问题困扰我好久，试了很多方法不管用，今天终于解决了，赶快记下来。
下面是提交按钮的wxss样式：
下面是提交按钮的wxml样式乱告哗：
开始在textarea文本框上下功夫，想利用d出层类似的方案来解决这个穿透问题，但是最终宣告失败。
网上查，z-index分别在子层级，和父层级上设置这个属性，哪个值大，哪个层级就在最上面。
于是我在textarea上，设置z-index:0,这样，在模拟器上运行就没问题了，但是iOS真机就无效了。z-index会失去作用。textarea输入的内容还是会浸透在遮盖在textarea上的布局。后来查阅官方文档，发现用cover-view可以解决。
原生组件说明官方文档
于是，我把底部提交按钮的view控件，换成了cover-view
运行结果，还是不行，又将cover-view动态样式里加上z-index：999，问题才解决。
红框就是备注textarea中的内容，当d窗d出，内容就会穿透出来。这时用上面的z-index方面就失效了，也搞不懂是什么原因，于是通过改textarea显示方式来解决穿透问题。
思路：就是当d窗d出的时候，设置一个值为true，在textarea做wx：if判断那个哗行值为true时，证明d窗d出，把textarea改成text显示即可。
这样，d窗穿透问题就解决了。
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
}
至此，实现想要的效果。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）