完美解决textarea的坑
先上效果图：
解决textarea组件穿透弹窗或遮罩层：
.wxss
.view_contain1{
width: 96%;
height: 200rpx;
border: 3rpx solid #6699FF;
margin: 0 2% 0 2%;
}
.areaInput{
width: 100%;
height: 150rpx;
}
.textarea-counter {
font-size: 24rpx;
color: #999;
text-align: right;
height: 40rpx;
line-height: 40rpx;
padding-top: 4rpx;
}
.wxml
<text>解决页面滚动时placeholder/输入内容不随textarea组件滚动，经多方尝试，出现这种情况是textarea的某个父级元素设置了overflow属性，去掉所有父级元素的overflow属性即可解决...解决textarea组件为原生组件层级最高，穿透弹窗或遮罩层。
这步应该是最复杂的了，网上有很多方法但都不尽如人意。此处的解决思路是设置一个跟textarea布局一致的替代元素，与textarea交替展现。当点击替代元素时textarea展现，就可以输入内容，当textarea失去焦点时替代元素展现，将输入值赋给替代元素，这样不输入内容页面滚动时就不会出现textarea穿透问题。
本坑注意要设置textarea自动聚焦（否则要点两次替代元素才能拉起键盘），且两个元素的切换要用wx:if,不能用显示和隐藏</text>
<!-- 关键性代码 -->
<view class='view_contain1' data-show="1" bindtap="ifshowArea">
<textarea wx:if="{{textareaIsShow}}" class='areaInput' bindblur="ifshowArea" data-show="0" value="{{textareaValue}}" maxlength="200" placeholder="请输入" focus="true" bindinput="textareaInput"/>
<view wx:if="{{!textareaIsShow}}" class='areaInput' style='color:{{textareaValue==""?"#999":"#2b2b2b"}}; white-space:pre-line;' >{{textareaValue==""?"请输入":textareaValue}}</view>
<view class="textarea-counter">{{textareaValue.length}}/200</view>
</view>
<text>解决页面滚动时placeholder/输入内容不随textarea组件滚动，经多方尝试，出现这种情况是textarea的某个父级元素设置了overflow属性，去掉所有父级元素的overflow属性即可解决...解决textarea组件为原生组件层级最高，穿透弹窗或遮罩层。
这步应该是最复杂的了，网上有很多方法但都不尽如人意。此处的解决思路是设置一个跟textarea布局一致的替代元素，与textarea交替展现。当点击替代元素时textarea展现，就可以输入内容，当textarea失去焦点时替代元素展现，将输入值赋给替代元素，这样不输入内容页面滚动时就不会出现textarea穿透问题。
本坑注意要设置textarea自动聚焦（否则要点两次替代元素才能拉起键盘），且两个元素的切换要用wx:if,不能用显示和隐藏</text>
.js
const app = getApp()
Page({
data: {
textareaIsShow: false,
textareaValue: ''
},
onLoad: function () {
},
/**
* textarea失去焦点时候触发,按view触发
* @param {} e
*/
ifshowArea(e) {
console.log('显示：', e)
if (e.currentTarget.dataset.show==1) { //view按了后进入
this.setData({
textareaIsShow: true
});
} else { //textarea是去焦点会进入
this.setData({
// textareaValue:e.detail.value,
textareaIsShow: false,
})
}
},
textareaInput(e){
this.setData({
textareaValue:e.detail.value,
})
}
})