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

最新推荐文章于 2023-07-11 11:59:31 发布
最新推荐文章于 2023-07-11 11:59:31 发布
阅读量544 收藏 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组件

QVQ梁小鱼QAQ
关注
专栏目录
微信小程序-如何解决input、textarea层级穿透？【亲测有效】
**My Coding Family**
03-23 2025
微信小程序-如何解决input、textarea层级穿透？【亲测有效】
【工作记录】解决微信小程序原生组件textarea因层级过高导致穿透其他元素问题
零信号的博客
07-26 696
工作需求是这样的，这是一个产品点评页，有一个产品下拉选择框，当点击下拉按钮时，会有一个下拉弹框覆盖在编辑框之上。
一步快速解决微信小程序中textarea层级太高遮挡其他组件
10-17
主要给大家介绍了关于如何通过一步快速解决微信小程序中textarea层级太高遮挡其他组件问题的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
微信小程序placeholder穿透问题
qq_39174716的博客
09-03 675
textarea标签中的placeholder会击穿图层，去添加状态隐藏其他属性，如点击日期时弹出的日历，日后后面的便签都隐藏可以使用，页面上hidden="{{true}}"去隐藏也可以使用JS改变装太去隐藏
textarea的placeholder穿透问题
qq_41818857的博客
09-21 463
在开发者工具调试的时候还是好好的，ios系统也是好好的，一到安卓手机上就会出现穿透问题，调样式，调层级都不管用。 解决办法： 1、通过一定条件去判断隐藏还是显示文本框，比如我是在弹窗的时候出现这个问题，所以我就判断当弹出层出来的时候隐藏文本框，当弹出层消失的时候出现文本框。 2、如果不是弹窗的情况，可以使用cover-view组件来代替被placeholder穿透的元素。 ...
uniapp 小程序输入框的placeholder会穿透到弹出层
weixin_44179923的博客
04-07 1465
此情况常发生于表单，点击表单中的选择器、弹出层，会发现输入框的placeholder会浮现在选择器上层，点击会弹出软键盘，怎么调整输入框与选择器、弹出层的层级都无法解决该问题。 问题原因 input仅在微信小程序、支付宝小程序、字节跳动小程序、飞书小程序、QQ小程序中且input置焦时表现为原生组件，其中支付宝小程序的input仅为text且置焦时表现为原生组件。 textarea仅在微信小程序、百度小程序、字节跳动小程序、飞书小程序表现为原生组件。 原生控件的层级是最高的，前端组件无法覆盖原生控件的
微信小程序之踩坑textarea 组件的 bug
qq_41619741的博客
09-20 4170
微信小程序公测也有段时间了，但是里面的坑踩了一个又一个，心也是够累的。本文说说关于 textarea 组件的 bug。（注：本文提及的 bug，至少在 2016-12-1日还存在） 上一篇：微信小程序之踩坑之旅一，wx.request 和 wx.uploadFile 测试时使用到： 微信web开发者工具 v0.11.112301 手机预览，iPhone6s，微信6.3.31 ...
input type=“textarea“ 的placeholder内容穿透其他弹出层
qq_49490164的博客
05-13 534
input type=“textarea” 的placeholder内容穿透其他弹出层 首先，这个穿透问题是原生的，无法用样式改变 那么我选择最简单的方法，当其他表单弹出层显示时，隐藏textarea，完美解决！ 言简意赅上代码 html <uni-forms-item label="类型" name="dictHouseRenovation"> <uni-data-picker placeholder="请选择类型" popup-title="请选择类型" :localda
小程序textarea遇到的那些坑，总结！
厦门在乎科技
06-02 767
相信做微信小程序的码友们都被textarea这个原生组件坑过，什么placeholder位置错乱，穿透弹窗或遮罩层，ios上输入法弹起后换行输入内容遮挡，删除输入内容时内容被遮挡等等。 反正综上所述我全遇到了，埋完一个坑又出一个新坑，在埋坑过程中数次想过放弃（就想跟老板说这是小程序的bug解决不了），但想想自己曾经夸下的海口（没有搞不定的，只有不想搞的），又默默地把手放在鼠标键盘上! 填坑步骤1： 解决页面滚动时placeholder/输入内容不随textarea组件滚动，经多方尝试，出现这种情况是tex
前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）持续更新
热门推荐
MingL520的博客
07-17 8万+
文档描述 本文是关注微信小程序的开发和面试问题， 由基础到困难循序渐进， 适合面试和开发小程序。 并有热点框架（vue react node.js 全栈）前端资源以及后端视频资源和源码 并基于前端进阶和面试的需求 总结了常用插件和js算法 以及html/css和js热点面试题 因为csdn不可以有外链 所以答案链接在评论区！！！ Vue面试题 生命周期函数面试题 1.什么是...
微信小程序textarea层级过高的解决方法
10-17
主要给大家介绍了关于微信小程序textarea层级过高问题的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
前端面试题总结（js、html、小程序、React、ES6、Vue、全栈）
qianduan666a的博客
07-14 590
前端面试题总结（js、html、小程序、React、ES6、Vue、全栈） 文档描述 本文是关注微信小程序的开发和面试问题， 由基础到困难循序渐进， 适合面试和开发小程序。 并有热点框架（vue react node.js 全栈）前端资源以及后端视频资源和源码 并基于前端进阶和面试的需求 总结了常用插件和js算法 以及html/css 和js热点面试题 Vue面试题 生命周期函数面试题 1.什么是 vue 生命周期 2.vue生命周期的作用是什么 3.第一次页面加载会触发哪几个钩子
小程序textarea穿透问题
Depressiom的博客
01-06 264
当有fixed元素时，无论设置多少z-index值，textarea组件都会穿透该fixed元素。
textarea 为什么placeholder不生效
paopao_pop的博客
04-26 1328
最近也是写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 1657
采用<cover-view>标签代替<view>标签，并设置属性z-index: 9999;即可。 <view class="bottomBtnBox" > <button>提交报名</button> </view> 替换成如下： <cover-view class="bottomBtnBox" > <button>提交报名</button> </cover-view> ...
小程序之坑----ios弹窗滑动穿透
hanchengmei的博客
03-10 3975
项目：taro3+vue3 场景：页面上有浮层，手势 滑动浮层，ios会穿透，页面也会滑动，如果页面上有地图，地图也会随之拖动 <view class="base-touch-layout" :catch-move="true" :animation="animationData"> <view class="base-touch-layout-in" @touchmove="touchMove" > <slo
微信小程序input的placeholder脱离文档流
T3165919332的博客
07-11 1149
今天进行真机调试时input的提示词 placeholder脱离了文档流，但是奇怪的是input框没有脱离文档流。
解决微信小程序textarea 里输入的文字或者是placeholder里的值，飘到弹出view上
weixin_30770495的博客
09-04 1155
在uniapp微信小程序开发中使用textarea，结果发现输入框的问题浮动起来，view无法把他覆盖，设法设置index的值也不生效，所以只能是通过条件v-if或者v-show使其隐藏就可以了 转载于:https://www.cnblogs.com/lwming/p/11459577.html...
微信小程序input和textarea的placeholder内容穿透view层的解决方案
是我的温柔啊
10-29 1282
结论：采用<cover-view>标签代替<view>标签，并设置属性z-index: 9999;即可。 原来代码： <view class="buttonView"> <button style="width:50vw;border-radius: 0;margin: 0px;background-color: #4285F4;" bindtap="close">返回</button> <button style=
微信小程序 textarea 让placeholder换行
最新发布
09-27
微信小程序的 `textarea` 组件默认不会让 placeholder 文本自动换行，因为它是按照一行显示文本的。如果你想要实现 placeholder 换行效果，可以采用一种技巧，即自定义样式并设置 `line-height` 和 `white-space` 属性。 首先，在你的 `.wxml` 文件中，保持 textarea 的基本结构不变： ```html <view class="custom-textarea"> <textarea placeholder="这是一段很长的占位符，需要换行" bindinput="handleInput"></textarea> </view> ``` 然后，在对应的 `.wxss` 或者全局 CSS 文件中添加样式： ```css .custom-textarea { position: relative; } .custom-textarea textarea { position: absolute; width: 100%; height: 100%; outline: none; /* 防止输入框边框 */ resize: none; /* 禁止调整大小 */ /* 自定义样式 */ color: transparent; font-size: 0; white-space: pre-line; /* 设置文本允许换行 */ line-height: normal; /* 使用正常的行高 */ } ``` 通过这样的设置，当用户聚焦到 textarea 时，尽管文本区域看起来还是单行的，但 placeholder 文字会换行显示。然而，这种做法仅适用于占位提示，实际输入的文本会被视为一个整体，不会有自动换行。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值