小程序 textarea、input 层级过高,导致填写内容穿透,z-index无效问题解决方案。
小程序的textare、input输入框层级是最高的 那么我们在textare、input输入的内容就会总是显示在最上一层。
这是时为什么呢?官方文档有说明,因为textare、input这些是原生组件。原生组件的层级是最高的,不管其它非原生组件z-index设置多大,原生组件都无法覆盖在原生组件上。想了很久终于想到个办法,但是并不完美。
思路:textarea输入完成时,将textarea隐藏,将输入内容显示在一个text文本框,此时页面没有原生组件textarea,底部的价格浮层就可完美遮住输入内容。当点击text输入框时,又将text隐藏,显示textarea,并将textarea的焦点选中,这样又可以继续输入内容。这样就不会有穿透问题。主要运用了textarea的bindblur(输入框失去焦点触发事件)、bindconfirm(输入点击完成触发事件)、focus(获取焦点 Boolean)。
WXML:
JS:
page({
data: {
onFocus: false, //textarea焦点是否选中
isShowText:false, //控制显示 textarea 还是 text
remark: '', //用于存储textarea输入内容
},
onShowTextare() { //显示textare
this.setData({
isShowText: false,
onFacus: true
})
},
onShowText() { //显示text
this.setData({
isShowText: true,
onFacus: false
})
},
onRemarkInput(event) { //保存输入框填写内容
var value = event.detail.value;
this.setData({
remark: value,
});
},
})
就是这样就不完美的解决了textare穿透的问题了,输入完成滚动页面,底部价格浮层都可以完美遮住输入框内容(因为此时并没有输入框,只有text文本框,当然不会出现层级穿透问题了)。但是当用户在textarea正在输入时,滚动页面此时显示的是textarea,并没有输入完成触发事件用text替换textarea。此时任然存在穿透显示问题。
这就是我能想到的解决办法了。0.0 如有不足或更好的解决方案,欢迎留言交流。
小程序 textarea、input 层级过高,导致填写内容穿透,z-index无效问题解决方案。的更多相关文章
- 解决微信小程序视频组件层级过高的问题
本文首发于我的个人博客:http://www.fogcrane.org 前言 在微信小程序的开发中,总有一些"VIP"组件,他们的层级,高得让人抓狂,总是凌驾于很多其他低层级组件之 ...
- 微信小程序 textarea的placeholder层级过高 在弹层之上 bug解决方法
微信小程序textarea的placeholder的层级一直都是一个神坑, 我们是没有办法将我们的弹层加大层级去盖过placeholder的, 所以要解决这个问题只能从另外的角度找思路 我的思路是 : ...
- 微信小程序:input输入框和form表单几种传值和取值方式
1.传值:index下标传值.页面navigator传值 1.index下标 实现方式是:data-index="{{index}}"挖坑及e.currentTarget.data ...
- 去掉小程序textarea上的完成按钮栏
小程序textarea上会自动多一个完成按钮,如下图所示,如果是mpVue,在textarea添加 :show-confirm-bar="false" 即可.
- python学习笔记(2)——练习小程序之 " input " 隐藏陷阱
练习小程序之 ----------" input " 隐藏陷阱 age=input('please enter your age:') if age>=18: print(' ...
- 【小程序】---- input获得焦点时placeholder重影BUG
问题小程序的input组件有个自身的bug,即当输入框获取焦点时placeholder内容会出现重影现象. 解决思路原理:将placeholder内容单独写在另外的标签里,控制其显示隐藏.操作:将代表 ...
- 关于微信小程序textarea层级过高问题解决
一.前言 相信做过微信小程序开发的人应该都碰到过这个问题,因为这个需求实在太常见了 由于textarea是属于原生组件,层级最高,不管在页面中我们设置z-index值多少都会被textarea组件遮挡 ...
- 解决微信小程序textarea层级太高遮挡其他组件的问题
<view class='remark'> <view class='title'> 备注说明 </view> <textarea class='mark_t ...
- 小程序textarea设置maxlength后不是你想的那样简单
可能很多小伙伴们.看见这个标题后; 觉得作者是一个标题党. textarea设置maxlength后, 限制用户输入的字符呗! 还能怎么样呢? 恭喜你,说对了一半. 之前我也一直是这样想的. 知道今天 ...
随机推荐
- Nginx日志配置及配置调试
防火墙内的内网服务器,因为网关传过来的remot_addr都一样,不得不对Nginx的日志格式做了配置 配置语法如下: log_format myformat '$http_x_forwarded ...
- C#语言中的XmlSerializer类的XmlSerializer.Serialize(Stream,Object)方法举例详解
在对象和 XML 文档之间进行序列化和反序列化操作. XmlSerializer 使您能够控制如何将对象编码为 XML. 命名空间: System.Xml.Serialization程序集: S ...
- 如何使用php生成唯一ID的4种方法
php生成唯一ID的应用场景非常普遍,如临时缓存文件名称,临时变量,临时安全码等,uniqid()函数基于以微秒计的当前时间,生成一个唯一的 ID.由于生成唯一ID与微秒时间关联,因此ID的唯一性非常 ...
- 遍历php数组的几种方法
第一.foreach() foreach()是一个用来遍历数组中数据的最简单有效的方法. <?php $urls= array('aaa','bbb','ccc','ddd'); foreach ...
- docker学习笔记(一)—— ubuntu16.04下安装docker
docker学习笔记(一)—— ubuntu16.04下安装docker 原创 2018年03月01日 14:53:00 标签: docker / ubuntu 1682 本文开发环境为Ubuntu ...
- spring-mvc报红错误
can't resolve spring 以及运行测试案例报错 ‘无法找到路径’ 解决办法是在pom文件里面重新配置 对应 resource <resources> <resou ...
- Python 描述符是什么?以及如何实现
先看一个例子,@property.被@property修饰的成员函数,将变为一个描述符.这是最简单的创建描述符的方式. class Foo: @property def attr(self): pri ...
- Slim 文档-First Application 翻译
最近刚好在用Slim框架,看文档的时候,中文文档中缺了这一篇没有翻译,于是我就把它翻译过来了.本人英语水平有限,如有错误请告知. 如果你在寻找创建一款非常简单的 Slim 应用程序的流程,来这里算是找 ...
- QT5:C++实现基于multimedia的音乐播放器(一)
上一篇里简略的描述了一下播放器的实现,这一篇开始具体描述一下过程. 环境配置:Qt Creator 打开Qt Creator,创建一个new project,项目名称随你喜欢(我的是MusicPlay ...
- Code Review Checklist
左按:当年需要一份详细的代码评审清单作参考,翻译了此文. 版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[-] General Code Smoke Test 通用测试 Comm ...