微信textarea和input穿透问题有两种解决方案:
写在前面的话:本人技术有限哪里写的不对,请多多指教!!!
因为本人开发框架是mpvue框架,所以和原生文档有所区别!!!
出现原因是因为这两个标签的是用户输入信息的标签,所以层级比较高,通过设置z-index方式是不能超过这两个标签的层级,所以同通过以下两种方式解决。
1.通过添加样式相同rich-text/其他标签元素,替代textarea和input标签。两者保持样式相同,通过变量在聚焦和失焦时交替显示隐藏真假textarea/input。
textarea的穿透(小程序里面)
a.在小程序input和textarea标签的穿透问题,
b.设置两个相同的样式的标签,一个是textarea/input,另一个是rich-text标签
c.当点击的时候,进入input和textarea标签内输入内容,绑定失焦事件,
d.失去焦点将输入的内容给绑定到rich-text标签的nodes,解决掉穿透问题
e.两部分设置形同的样式,在视觉上没有什么区别
代码如下:
html部分
<textarea :show-confirm-bar="false"
fixed
v-model="order.comments"
placeholder="请填写备注信息(200字以内)"
v-if="!isHidden"
@blur="hiddenText">
</textarea>
<div class='remark-rich' v-else @click="showText">
<rich-text :nodes="txtRealContent">请填写备注信息(200字以内)</rich-text>
</div>
js部分
初识化
data () {
return {
txtRealContent: '', // textarea替换内容
comments: '' // input框输入内容
}
/**
* textarea的内容替换
* @author chengminjuan
* @date 2018/10/26
*/
commentInput: function () {
this.isHidden = true
this.txtRealContent = ''
this.order.comments = ''
},
showText: function () {
this.isHidden = false
},
hiddenText: function () {
this.isHidden = true
this.txtRealContent = this.order.comments
}
2.如果穿透是因为遮罩或者按钮问题(后面会附上图片加以说明需求),那可以将遮罩/按钮包含在cover-view标签里面,但是cover-view覆盖在原生组件之上的文本视图。
可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher
只支持嵌套 cover-view、cover-image,可在 cover-view 中使用 button。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。
这是官方文档解释,里面出这些标签之外cover-view无法解析出来。
实现的效果图如下:
在textarea里面输入文字
bug出现的效果图
解决之后的效果图
代码实现
<div class="page">
<div class="content">
<div class="text-area">
<textarea name=""
placeholder="请输入内容..."
cols="30" rows="10" class="textarea"></textarea>
</div>
<div class="button" @click="showModal">点击</div>
</div>
<!-- 评价成功弹出框-->
<cover-view class="shade" v-if="shadeFlag">
<cover-view class="shade-container">
<cover-view class="shade-img">
<cover-view class="success-img">
<cover-image class="img" src="/static/component/lnk-page/success.svg"></cover-image>
</cover-view>
</cover-view>
<cover-view class="success-content">您的评价已提交成功!</cover-view>
<cover-view class="close-shade">
<cover-view class="close-btn" @click="closeShade">我知道了</cover-view>
</cover-view>
</cover-view>
</cover-view>
</div>
主要是将遮罩的标签换成cover-view标签
两种解决方案各有优缺点:
第一种的解决方案比较繁琐,而且控制两个标签的样式很难一致,在真机上很容易引起bug,优点是可以解决大部分情况的穿透问题。
第二种的优点,解决起来很简单,只需要将遮罩的div标签换成crover-view标签即可,但是cover-view里面可以包含的标签具有局限性,所以有些情况下是不能处理的,具体限制请看微信小程序官方文档