解决微信小程序placeholder文字”悬浮“问题

本文探讨了在不同场景下隐藏input或textarea组件占位符(textarea)的三种方法:利用display属性、cover-view组件及调整placeholder样式。通过实践案例,提供了一种不影响布局又能合理展示内容的解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

方法一:

在弹出层显示时隐藏input或者textarea组件,测试发现只有设置”display:none“才生效,设置"opacity:0"真机测试placeholder的文字依旧存在。当然也可以设置wx:if或hidden来显示隐藏,只不过这些做法都影响布局,不推荐

后来再想了下,其实可以在隐藏textarea的时候用view来模拟textarea显示内容,这样既不改变布局,也能合理地展示内容。

方法二:

通过“cover-view”组件来写弹出层,不修改placeholder。

官方原话:

覆盖在原生组件之上的文本视图,可覆盖的原生组件包括mapvideocanvascameralive-playerlive-pusher,只支持嵌套cover-viewcover-image,可在cover-view中使用button

 这个做法适合在弹出层层级比较单一的时候,倘若弹出层是一个自定义的日历,且日历的每个组件都要使用coever-view,cover-image代替,其渲染性能会大大减弱。(其实picker组件也是可以在cover-view中使用的,具体是将其显示的值用cover-view包裹即可)

方法三:

通过控制“placeholder-style"或者”placeholder-class"来设置placeholder的颜色来显示或隐藏placeholder文字。

<textarea placeholder-style="color: transparent" placeholder="请输入"/>

 

转载于:https://www.cnblogs.com/fiy-noob/p/9489354.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值