⼩程序中textarea层级问题
⼩程序开发中，有些原⽣组件，⽐如textarea存在层级太⾼的问题，⼀般发⽣在两种场景:
1.页⾯较长，然后底部有固定fixed的按钮
2.页⾯有⾃定义弹窗时
这两种情况下，textarea中的⽂字都会穿透固定按钮和弹窗浮在最上层。了很多⽅法，可能最合适的就是⾃定义⼀个替代元素，以下附上完整的代码(wepy框架⼩程序)：
template中的html：
<view class="demo">
<textarea class="weui-textarea" maxlength='150' auto-
focus="isFocus" @blur="bindContentBlur" value='{{mediaDemo}}' @input="bindTextAreaBlur" wx:if=" {{isInputContentFocus}}" placeholder="请输⼊媒体详情" placeholder-class="phClass"></textarea>
<!-- 下⾯是替代元素 -->
<scroll-view scroll-y class="content" @tap="bindContentFocus" wx:if="{{isContentFocus}}">
<div class="placeholder" wx:if="{{!mediaDemo}}">请输⼊媒体详情</div>
<div wx:else>{{mediaDemo}}</div>
</scroll-view>
</view>
data中涉及到的变量：
data={
mediaDemo: '',
isContentFocus: true,
isInputContentFocus: false,
isFocus: false,
}
methods中的⽅法：
methods = {
bindTextAreaBlur(e) {
this.$apply();
},
bindContentFocus() {
this.isFocus = true;
this.isContentFocus = false;
this.isInputContentFocus = true;
this.$apply();
},
bindContentBlur() {
this.isContentFocus = true;
this.isInputContentFocus = false;        this.isFocus = false;
this.$apply();
textarea中cols表示}
};
style中的样式：
.weui-textarea {
border: 1px solid #afb8cd;
background: #fff;
padding: 20rpx;
border-radius: 5rpx;
height: 150rpx;
margin: 30rpx auto 100rpx auto;
width: 86%;
}
.content {
margin: 30rpx auto 100rpx auto;
border: 1px solid #afb8cd;
background: #fff;
padding: 15rpx 20rpx 26rpx 20rpx;    border-radius: 5rpx;
height: 150rpx;
width: 86%;
}
.phClass,
.placeholder {
color: #999;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。