关于微信小程序textarea组件placeholder穿透的bug

最新推荐文章于 2025-03-17 15:08:30 发布
最新推荐文章于 2025-03-17 15:08:30 发布
阅读量600 收藏 1
点赞数 1
分类专栏： 微信小程序 文章标签： 微信小程序 bug 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35408366/article/details/128447213
版权

bug形成条件：如下图所示，当使用textarea组件时，placeholder会穿透弹框组件，一直处于页面最上层，由于textarea是原生组件，所已无法通过设置层级的方式去覆盖，除非同为原生组件。

 解决思路：1.可以通过同为原生组件的cover-view组件进行覆盖，将弹窗组件用cover-view重写。

                    2.通过view组件去模拟textarea组件，当弹窗显示时展示view组件，弹窗隐藏时展示textarea组件

微信小程序-如何解决input、textarea层级穿透？【亲测有效】
**My Coding Family**
03-23 2181
微信小程序-如何解决input、textarea层级穿透？【亲测有效】
小程序textarea遇到的那些坑，总结！
厦门在乎科技
06-02 829
相信做微信小程序的码友们都被textarea这个原生组件坑过，什么placeholder位置错乱，穿透弹窗或遮罩层，ios上输入法弹起后换行输入内容遮挡，删除输入内容时内容被遮挡等等。 反正综上所述我全遇到了，埋完一个坑又出一个新坑，在埋坑过程中数次想过放弃（就想跟老板说这是小程序的bug解决不了），但想想自己曾经夸下的海口（没有搞不定的，只有不想搞的），又默默地把手放在鼠标键盘上! 填坑步骤1： 解决页面滚动时placeholder/输入内容不随textarea组件滚动，经多方尝试，出现这种情况是tex
小程序 textarea组件层级过高导致文字穿透浮层的一个解决方法
Quiet-Night的博客
08-08 2万+
最近做的一个小程序需求，其中一个页面使用到了 textarea这个小程序组件，然后点击页面上的某个元素，会触发页面弹起一个弹窗，这时发现 textarea的 placeholder文字或者输入的文字内容，会直接穿透遮罩层和浮动弹窗，显示在最上面，开始时我以为是遮罩层和浮动弹窗的层级舍得小了，于是改大，谁知道没用，改到了 99999也没用，于是我意识到这应该不是我代码的问题，网上一搜，果然有故事。 ...
微信小程序placeholder穿透问题
qq_39174716的博客
09-03 703
textarea标签中的placeholder会击穿图层，去添加状态隐藏其他属性，如点击日期时弹出的日历，日后后面的便签都隐藏可以使用，页面上hidden="{{true}}"去隐藏也可以使用JS改变装太去隐藏
微信小程序：修改提示信息placeholder颜色
最新发布
weixin_46001736的博客
03-17 785
微信小程序：修改提示信息placeholder颜色
textarea的placeholder穿透问题
qq_41818857的博客
09-21 487
在开发者工具调试的时候还是好好的，ios系统也是好好的，一到安卓手机上就会出现穿透问题，调样式，调层级都不管用。 解决办法： 1、通过一定条件去判断隐藏还是显示文本框，比如我是在弹窗的时候出现这个问题，所以我就判断当弹出层出来的时候隐藏文本框，当弹出层消失的时候出现文本框。 2、如果不是弹窗的情况，可以使用cover-view组件来代替被placeholder穿透的元素。 ...
uniapp 小程序输入框的placeholder会穿透到弹出层
weixin_44179923的博客
04-07 1574
此情况常发生于表单，点击表单中的选择器、弹出层，会发现输入框的placeholder会浮现在选择器上层，点击会弹出软键盘，怎么调整输入框与选择器、弹出层的层级都无法解决该问题。 问题原因 input仅在微信小程序、支付宝小程序、字节跳动小程序、飞书小程序、QQ小程序中且input置焦时表现为原生组件，其中支付宝小程序的input仅为text且置焦时表现为原生组件。 textarea仅在微信小程序、百度小程序、字节跳动小程序、飞书小程序表现为原生组件。 原生控件的层级是最高的，前端组件无法覆盖原生控件的
微信小程序之踩坑textarea 组件的 bug
qq_41619741的博客
09-20 4203
微信小程序公测也有段时间了，但是里面的坑踩了一个又一个，心也是够累的。本文说说关于 textarea 组件的 bug。（注：本文提及的 bug，至少在 2016-12-1日还存在） 上一篇：微信小程序之踩坑之旅一，wx.request 和 wx.uploadFile 测试时使用到： 微信web开发者工具 v0.11.112301 手机预览，iPhone6s，微信6.3.31 ...
【工作记录】解决微信小程序原生组件textarea因层级过高导致穿透其他元素问题
零信号的博客
07-26 735
工作需求是这样的，这是一个产品点评页，有一个产品下拉选择框，当点击下拉按钮时，会有一个下拉弹框覆盖在编辑框之上。
前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）持续更新
热门推荐
MingL520的博客
07-17 8万+
文档描述 本文是关注微信小程序的开发和面试问题， 由基础到困难循序渐进， 适合面试和开发小程序。 并有热点框架（vue react node.js 全栈）前端资源以及后端视频资源和源码 并基于前端进阶和面试的需求 总结了常用插件和js算法 以及html/css和js热点面试题 因为csdn不可以有外链 所以答案链接在评论区！！！ Vue面试题 生命周期函数面试题 1.什么是...
h5底部输入框被键盘遮挡_微信 H5 页面兼容性解决方案
weixin_39528029的博客
10-25 1270
最近给公司微信公众号，写了微信h5业务页面，总结分享一下前端开发过程中的几个兼容性坑，项目直接拿的公司页面，所以下文涉及图片都模糊处理了。1、ios端兼容input光标高度问题详情描述：input输入框光标，在安卓手机上显示没有问题，但是在苹果手机上当点击输入的时候，光标的高度和父盒子的高度一样。例如下图，左图是正常所期待的输入框光标，右边是ios的input光标。出现原因分析：通常我们...
一步快速解决微信小程序中textarea层级太高遮挡其他组件
10-17
主要给大家介绍了关于如何通过一步快速解决微信小程序中textarea层级太高遮挡其他组件问题的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
微信小程序textarea层级过高的解决方法
10-17
主要给大家介绍了关于微信小程序textarea层级过高问题的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
input type=“textarea“ 的placeholder内容穿透其他弹出层
qq_49490164的博客
05-13 580
input type=“textarea” 的placeholder内容穿透其他弹出层 首先，这个穿透问题是原生的，无法用样式改变 那么我选择最简单的方法，当其他表单弹出层显示时，隐藏textarea，完美解决！ 言简意赅上代码 html <uni-forms-item label="类型" name="dictHouseRenovation"> <uni-data-picker placeholder="请选择类型" popup-title="请选择类型" :localda
小程序textarea穿透问题
Depressiom的博客
01-06 287
当有fixed元素时，无论设置多少z-index值，textarea组件都会穿透该fixed元素。
关于小程序中textarea 中placeholder滚动和穿透填坑
kirinlau的专栏
05-15 9421
小程序中的textarea一直是个坑，使用的是原生的textarea组件，其优先级，官方也没有给出明确的解决方案或者替代品，而且原生组件在开发时有一定的限制。具体可参考： https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html 我在小程序开发中，产品是在屏幕底栏有一个fix定位的操作栏，其中...
uniapp input穿透弹出层
liuxi_happy的博客
08-07 417
【代码】uniapp input穿透弹出层。
textarea 为什么placeholder不生效
paopao_pop的博客
04-26 1457
最近也是写JQ的项目，遇到好多的小坑，这也是有遇到一个，placeholder不生效的问题，代码如下： <textarea placeholder="请输入相关内容" id="contents" rows="10" maxlength="2000" onchange="sizecontrol()" onkeydown="sizecontrol()" onkeyup="sizecontrol()" > </textarea> 看起来没啥问题，但是原生属性placeholder
Uniapp，微信小程序input和textarea的placeholder内容穿透view层的解决方案
小星博博的博客
05-02 1703
采用<cover-view>标签代替<view>标签，并设置属性z-index: 9999;即可。 <view class="bottomBtnBox" > <button>提交报名</button> </view> 替换成如下： <cover-view class="bottomBtnBox" > <button>提交报名</button> </cover-view> ...
微信小程序textarea组件穿透问题
12-05
微信小程序中的textarea组件穿透问题通常是指在某些情况下，textarea组件会覆盖在其他元素之上，导致用户无法与下方的元素进行交互。这种问题常见于多层嵌套的页面结构中，特别是在使用fixed定位或弹窗时。 ### 产生原因 1. **层级问题**：微信小程序的层级（z-index）管理机制可能导致textarea组件覆盖在其他元素之上。 2. **fixed定位**：使用fixed定位的元素在某些情况下可能会被textarea覆盖。 3. **弹窗**：弹窗中的textarea组件可能会穿透弹窗背景，导致无法正常交互。 ### 解决方法 1. **调整层级**：确保textarea组件的层级低于其他需要交互的元素。可以通过调整z-index来实现。 ```css .textarea-container { z-index: 1; } .other-element { z-index: 2; } ``` 2. **使用scroll-view**：将textarea放在scroll-view中，避免fixed定位带来的问题。 ```html <scroll-view> <textarea></textarea> </scroll-view> ``` 3. **弹窗处理**：在弹窗中使用textarea时，确保弹窗的z-index高于textarea，并且弹窗关闭时textarea失去焦点。 ```javascript wx.createSelectorQuery().selectViewport().scrollOffset(function(res) { res.top // 滚动条距离顶部的距离 }).exec() ``` ### 示例代码 ```html <!-- 页面结构 --> <view class="container"> <view class="other-element">其他元素</view> <textarea class="textarea" placeholder="请输入内容"></textarea> </view> ``` ```css /* 样式 */ .container { position: relative; z-index: 1; } .other-element { position: absolute; top: 0; left: 0; z-index: 2; } .textarea { width: 100%; height: 200px; } ``` ### 总结 微信小程序中的textarea组件穿透问题主要与层级和定位相关。通过调整z-index、使用scroll-view以及合理处理弹窗，可以有效解决这一问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值