解决思路:借助一个变量使其在得到焦点的时候是文本域或者文本框，失去焦点的时候变成div
在wxml中
<view class="questionBack-box hideBtn">
<textarea
value="{{content}}"
bindblur="bindContentBlur"
wx:if="{{isInputContentFocus}}"
placeholder="说说对这个活动看法吧"
focus="{{isFocus}}"
></textarea>
<div class="placeholder" wx:else bindtap="bindContentFocus">{{placeholder}}</div>
</view>
在wxss中
.placeholder{
cursor: auto;
width: 100%;
height: 300rpx;
display: block;
position: relative;
overflow-y: scroll;
}
.questionBack-box textarea,.placeholder{
font-size:22rpx;
color:rgba(111,116,121,1);
line-height:30rpx;
text-align: left;
padding-left: 20rpx;
box-sizing: border-box;
}
在js中输入
Page({
data: {
content:'',
placeholder:'说说对这个活动看法吧',
isInputContentFocus: false,
isFocus: false
},
bindContentFocus(e) {
this.setData({
isFocus : true, //触发焦点
isInputContentFocus: true//聚焦时隐藏内容文本标签
})
},
bindContentBlur(e) {
this.setData({
isInputContentFocus : false, //聚焦时隐藏内容文本标签
isFocus : false, //失去焦点
content:e.detail.value,
placeholder: e.detail.value
})
if (e.detail.value== '') {
this.setData({
placeholder:'说说对这个活动看法吧'
})
}
}
})