微信小程序textarea组件在fixed定位中随页面滚动

最新推荐文章于 2025-03-28 09:24:22 发布

weixin_30316097

最新推荐文章于 2025-03-28 09:24:22 发布

阅读量750

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhaomeizi/p/10118085.html

如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true

https://developers.weixin.qq.com/miniprogram/dev/component/textarea.html

转载于:https://www.cnblogs.com/zhaomeizi/p/10118085.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30316097

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

微信小程序-input或textarea 里输入的文字或者是placeholder里的值，飘到弹出view上

kerryqpw的博客

07-31

5402

微信小程序-input或textarea 里输入的文字或者是placeholder里的值，飘到弹出view上 微信小程序中经常会出现：弹出view，input框文字飘到view上，如下图。 ··········由于textarea是原生组件实现，层级最高，目前还无法支持在上面覆盖元素这样的交互设计。既然如此我们就只能----绕着走了。 ...

input层级高小程序_小程序 textarea组件层级过高导致文字穿透浮层解决方案

weixin_30670859的博客

12-24

578

最近做的一个小程序需求，其中一个页面使用到了 textarea这个小程序组件，然后点击页面上的某个元素，会触发页面弹起一个弹窗，这时发现 textarea的 placeholder文字或者输入的文字内容，会直接穿透遮罩层和浮动弹窗，显示在最上面，开始时我以为是遮罩层和浮动弹窗的层级舍得小了，于是改大，谁知道没用，改到了 99999也没用，于是我意识到这应该不是我代码的问题，网上一搜，果然有故事。解...

参与评论您还未登录，请先登录后发表或查看评论

解决微信小程序input textarea输入框内容以及palceholder随页面滚动式跟着滚动，飘起来了。

一键写代码的博客

06-17

3607

bug 类型效果：输入框内的文字跑了。解决办法：测试了网上的监听滚动事件，手动调用wx.hideKeyboard等方式，都不好使。大概原因：在页面出现滚动时，输入框跑了。如果不是滚动页面，不能滚动，就不会出现。刚开始整个外层标签是<view></view>，换成<scroll-view></scroll-view> 再加个样式min-height:100vh; 就完美解决了。原因可能和小程序原生对scroll-view内的input等滚动做

微信小程序使用fixed定位的input输入框placeholder随屏幕滚动的bug

weixin_45208435的博客

04-11

1089

解决方案：把input输入框改为textarea 然后加上属性 fixed="true"就可以了

微信小程序 - textarea 的内容不固定问题

weixin_34211761的博客

06-14

1001

为什么80%的码农都做不了架构师？>>> ...

微信小程序textarea层级过高的解决方法

10-17

解决微信小程序textarea层级过高的问题，可以通过控制textarea的显示与隐藏、结合其他组件的使用，以及利用cover-view和cover-image等原生组件进行覆盖。根据实际业务场景选择合适的解决方案，以保证用户界面的正常...

微信小程序textarea组件穿透问题

12-05

微信小程序中的textarea组件穿透问题通常是指在某些情况下，textarea组件会覆盖在其他元素之上，导致用户无法与下方的元素进行交互。这种问题常见于多层嵌套的页面结构中，特别是在使用fixed定位或弹窗时。 ### ...

微信小程序开发：微信小程序组件应用研究

最新发布

weixin_74149145的博客

03-28

1569

视图容器组件<view>：最基本的容器组件，用于布局，可设置样式、绑定事件等。：可实现内容滚动效果，通过设置scroll-xscroll-y属性控制横向或纵向滚动，属性可使指定元素滚动到可视区域等。文本组件<text>：用于显示普通文本，可通过selectable属性设置是否可选中，space属性处理空格显示等。：用于富文本展示，可解析 HTML 样式的标签，实现图文混排等复杂文本效果。图像组件<image>：用于显示图片，src属性指定图片路径，mode属性控制图片缩放模式，如aspectFit。

UniApp组件与微信小程序组件对照学习

行思理的博客

09-26

2413

UniApp只是一个第三方的开发工具，借鉴各种平台的能力，UniApp的组件也借鉴了微信小程序的组件，我们学习时，可以进行对照学习，我们在用UniApp开发微信小程序时，UniApp也只是将代码转成了微信小程序的代码，还是需要了解微信小程序开发，才能开发出微信小程序的。

小程序中textarea的问题

01-21

2569

1.textarea在view的包裹下，当上下拖动屏幕时，view的布局没动，但是textarea的布局却上下移动，而且在小程序的IDE上又不能重现此问题。解决方法：在textarea中添加fixed="true", 2.textarea聚焦弹出软件盘时盖住了textarea的输入框; 解决方法：添加属性cursor-spacing="20"，其中20是一个数字，代表光标距离软键盘的高度有...

微信小程序 fixed 解决 textarea 的 placeholder 不固定问题

书写人生

05-19

1万+

当我们把 textarea 放到一个 position:fixed; 中的元素中时。会发现这个 textarea 也会跟着固定位置，但是 textarea 的 placeholder 内容不会固定，当滚动页面时，placeholder 的内容会跟着滚动。如何解决呢？给 textarea 增加属性 fixed：

微信小程序fixed定位元素中的textarea聚焦时被键盘遮挡

u010281877的博客

05-09

4813

微信小程序fixed定位元素中的textarea聚焦时被键盘遮挡场景描述BUG复现预期输入时效果BUG表现解决方案1 修改弹窗定位方式2 修改文档流布局总结场景描述用户点击某选项，弹出一个表单弹窗，弹窗中有使用textarea组件，当用户点击输出框输入时，键盘遮挡到textarea组件原本的文字，textarea组件悬浮到键盘上方并遮挡其他内容 BUG复现这是一个代码片段预期输入时效果 ...

小程序textarea 输入内容，滑动页面，内容也跟着滑动

Hero_rong的博客

09-25

3437

给 textarea增加fixed属性：<textarea fixed>即可

微信小程序textarea的placeholder输入值浮在另一层view上的一种解决方法

cc1314_工作、学习有感

11-02

4372

<textarea style="width:90%;height:100px;border:1px solid #aaa;" placeholder='我没被挡住'></textarea> <view style='width:100%;height:110px;position:fixed;top:0px;left:0;background:#fff;'>...

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

weixin_30588729的博客

08-16

2404

方法一：在弹出层显示时隐藏input或者textarea组件，测试发现只有设置”display:none“才生效，设置"opacity:0"真机测试placeholder的文字依旧存在。当然也可以设置wx:if或hidden来显示隐藏，只不过这些做法都影响布局，不推荐。后来再想了下，其实可以在隐藏textarea的时候用view来模拟textarea显示内容，这样既不改变布局，也能合理地展...

微信小程序textarea 的内容不固定问题

zz_chst的博客

09-12

3026

最近在开发微信小程序的时候发现，当我们把 textarea 放到一个 position:fixed; 中的元素中时。会发现这个 textarea 也会跟着固定位置，但是 textarea 里面的内容不会固定，当滚动页面时，内容也会跟着滚动。如何解决呢？经过研究发现：给 textarea 增加属性 fixed：<textarea fixed> 完美解决！...

小程序 textarea组件层级过高导致文字穿透浮层的一个解决方法