- 解决textarea的placeholder层级穿透的问题
先说下遇到的问题:之前做过的一个项目改版碰到的病例上传页面发布按钮上一版本是在底部放置的,这一版改为了顶部固定。由于上传页面顶部有两个textarea输入框所以问题就产出了。之前使用的button和view标签布的局页面上滑的时候会被textarea的placeholder穿透。不知道官方什么时候可以解决textarea这个问题。 具体问题如下图: [图片] [图片] 解决方法来源,通过社区各位大佬的回复最终得出以下结论: 1.思路: 通过原生组件去覆盖textarea元素即可 textarea不是原生组件吗 view和button干不过 那我们也找原生组件不就好了吗。所以我就看了下能使用的也就剩cover-view标签了。所以第一种解决方法就是使用原生组件去替换之前的view和button组件。 [图片] 2.思路:通过滑动页面去判断textarea元素的显示和隐藏 使用onPageScroll函数来获取页面的滚动距离 当滚动距离等于textarea元素的top减去固定到顶部的盒子的距离的时候就让textarea元素隐藏或者把textarea的placeholder设置为空也是可以解决穿透问题的。 补充: 3.思路:只用view、input、text等字段去替换textarea元素,来避免textarea的pplaceholder穿透问题 如果有弹窗或者组件被穿透了,可是做一个判断,当弹窗出现的时候设置一个hide字段,并根据字段判断textarea的显示隐藏,并且当textarea隐藏后,用一个样式相同input,或者view组件代替显示原来的textarea,当弹窗消失后,再将textarea显示,将view或者input隐藏掉(注意,给textarea设置一个bindinput的方式将输入的文字显示在view或者input里面,这样基本看不出内部组件类型的变化) [图片] 感谢大佬提供的第三种方案,感觉很不错。 如果还有其他的。欢迎留言。
2020-09-07 - textarea的placeholder穿透问题?
已解决具体查看:https://developers.weixin.qq.com/community/develop/article/doc/0004eea3024e7075653a30bb05ac13 textareaplaceholder 如图 页面上滑的时候textarea的placeholder会穿透过来 工具上面正常,真机会出现这样的问题 vivo NEX s 7.0.13 [图片] [图片]
2020-04-17 - textarea placeholder层级问题
微信开发工具 的远程调试测试的 ios 和 安卓 都试了都有这个问题 页面没有下拉之前 [图片] 页面下拉之后 [图片] textarea placeholder 始终现在在最上面,我footer的z-index设置过9999也挡不住 第二张图可以看出能遮挡住textarea的边框,但就是遮挡不住 placeholder好像是个bug求修复~ 微信开发者工具v1.02.1805181 (远程调试) 微信版本6.6.7 iphone 6S , ios 版本 11.3.1 wxml: [图片] wxss: [图片] [图片]
2018-06-07