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

最新推荐文章于 2024-06-27 10:20:38 发布
最新推荐文章于 2024-06-27 10:20:38 发布
阅读量5.2k 收藏 2
点赞数
分类专栏： 微信小程序原生基础爬坑
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kerryqpw/article/details/81294513
版权
在微信小程序中，当input或textarea的内容或placeholder与弹出view重叠时，可通过动态调整input样式，将其移出屏幕来避免遮挡。在弹出view时设置input的margin使其移出屏幕，关闭view时再移回原位置。
摘要由CSDN通过智能技术生成

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

 

     微信小程序中经常会出现：

弹出view，input框文字飘到view上，如下图。

        

 

··········由于textarea是原生组件实现，层级最高，目前还无法支持在上面覆盖元素这样的交互设计。

既然如此 我们就只能----绕着走了。

 

规避法，弹出view时，把input或者textarea组件移出屏幕，这样即可不挡屏幕。

给input或者textarea的view加上动态样式。

 

wxml:

    <view class="li clear" style="margin-top:{
  {top}};">
          <view class="tit ">意向运价</view>
          <view class="rbox "&g
了解本专栏 订阅专栏 解锁全文 超级会员免费看
慕容屠苏
关注
专栏目录
订阅专栏
解决微信小程序长页面滚动到底部点击底部的输入框后输入框漂浮且页面滚动到顶部
仰望星空的代码
07-03 2682
一、问题描述 项目中有一个长页面上部展示部分信息下部为信息录入，页面长度为三屏幕（不同手机屏幕大小略有差异），当滚动到第二屏或者第三屏去填写信息时点击输入框后输入框漂浮起来了并且页面向上滚动了一段距离，回到了第一屏中展示的内容。效果如图。 滚动到第二屏，证件号输入。 点击输入框 可以看到证件号输入框漂浮了起来并且页面滚动到了第一屏展示的内容。 注意：小程序是2018年上线，在2020年4月份之前该页面从未出现过这种现象。推测：微信的后续更新中对微信小程序基础库进行了重构，导致点击输入框后页
解决微信小程序input textarea输入框内容以及palceholder随页面滚动式跟着滚动，飘起来了。
一键写代码的博客
06-17 3237
bug 类型效果： 输入框内的文字跑了。 解决办法： 测试了网上的监听滚动事件，手动调用wx.hideKeyboard等方式，都不好使。 大概原因： 在页面出现滚动时，输入框跑了。 如果不是滚动页面，不能滚动，就不会出现。 刚开始整个外层标签是<view></view>， 换成<scroll-view></scroll-view> 再加个样式min-height:100vh; 就完美解决了。 原因可能和小程序原生对scroll-view内的input等滚动做
微信小程序，输入框内容滑动飘动
喜兴
01-13 2379
解决方案： 输入框设置 always-embed <input placeholder="请输入" always-embed="{{true}}" value="{{waterTreatment}}" type="digit" bindblur="bindInputChange"></input>
解决微信小程序使用textarea输入框 type=“textarea“ 文本输入限制问题
weixin_45776545的博客
06-27 657
【代码】解决微信小程序使用textarea输入框 type=“textarea“ 文本输入限制问题。
小程序奇怪的bug——入框内容会滑动飘动
weixin_46121939的博客
11-09 1149
小程序输入框内容会滑动飘动问题
ios下微信小程序中input框漂移问题
qq_41539461的博客
12-22 815
不断尝试的过程中发现，如果删除小程序，重新进入，第一次进入这个购物车页面的时候，不论如何滑动，这个input框都是正常显示的，离开页面第二次进入就会出现错位的问题，这时候这个bug原因就变的清晰了起来。一旦明确了这个问题，我就尝试了一种最简单的方法，在弹窗上增加了v-if判断，强制每次进入都重新渲染一遍，至此，困扰半个月的问题解决了。最近开发一个弹窗购物车的时候出现了滑动弹窗时里面的数字input框错位的问题，上微信社区看了好多问答仍然没有解决。同时这个问题还是一个兼容性问题，只在苹果手机上出现。
解决微信小程序placeholder文字”悬浮“问题
weixin_30588729的博客
08-16 2343
方法一： 在弹出层显示时隐藏input或者textarea组件，测试发现只有设置”display:none“才生效，设置"opacity:0"真机测试placeholder的文字依旧存在。当然也可以设置wx:if或hidden来显示隐藏，只不过这些做法都影响布局，不推荐。 后来再想了下，其实可以在隐藏textarea的时候用view来模拟textarea显示内容，这样既不改变布局，也能合理地展...
小程序-textarea，input内文本浮在定位元素和弹框之上的解决
zhangxy的博客
11-05 3377
试过官方的cover-view包裹加z-index不生效 2、浮在弹框表层 解决 给textarea，input 增加 wx:if 判断条件，当弹框显示是控制 textarea，input 显示条件为 false 即可。 2、浮在定位按钮表层 2、 ...
Uniapp，微信小程序input和textarea的placeholder内容穿透view层的解决方案
小星博博的博客
05-02 1632
采用<cover-view>标签代替<view>标签，并设置属性z-index: 9999;即可。 <view class="bottomBtnBox" > <button>提交报名</button> </view> 替换成如下： <cover-view class="bottomBtnBox" > <button>提交报名</button> </cover-view> ...
解决微信小程序textarea 里输入的文字或者是placeholder里的值，飘到弹出view上
weixin_30770495的博客
09-04 1141
在uniapp微信小程序开发中使用textarea，结果发现输入框的问题浮动起来，view无法把他覆盖，设法设置index的值也不生效，所以只能是通过条件v-if或者v-show使其隐藏就可以了 转载于:https://www.cnblogs.com/lwming/p/11459577.html...
微信小程序 弹出输入框
Faaaaaaq的博客
01-13 961
微信小程序 弹出输入框。
微信小程序 input输入框详解及简单实例
11-28
微信小程序输入框input 相关文章： 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 ...
微信小程序uni-app：常用Form表单组件input、textarea、picker使用示例
彭世瑜的博客
12-07 1080
【代码】微信小程序uni-app：常用Form表单组件使用示例。
微信小程序-如何解决input、textarea层级穿透？【亲测有效】
**My Coding Family**
03-23 1982
微信小程序-如何解决input、textarea层级穿透？【亲测有效】
微信小程序，实时获取textarea输入信息
Thea12138的博客
03-27 4163
<textarea bindblur="bindTextAreaBlur" auto-height placeholder="请输入texterea内容" value="{{ceshi}}" /> 利用聚焦失焦获取输入框内容，缺点是：输入内容后，直接点击提交，获取不到内容，只有点击textarea区域之外才可以触发函数，获得值 <textarea bindinput="b...
微信小程序-textarea获取输入值（利用表单按钮）
7TribeZ的博客
06-06 5011
textarea可以bindconfirm（键盘输入完成时执行）也可bindinput（键盘输入时执行）这些在手机上都依赖于小键盘，如果加一个按钮完成将textarea的值传递都逻辑层呢。可以借助表单的bindsubmit。 wxml <form bindsubmit='bindFormsubmit'> <textarea bindconf...
小程序iOS使用input输入时placeholder及输入内容上移消失
weixin_33813128的博客
10-30 1665
为什么80%的码农都做不了架构师？>>> ...
微信小程序中键盘弹起输入框自动跳到键盘上方处理
w15635748705的博客
08-12 3704
键盘未弹起时。
微信小程序-如何解决input、textarea层级穿透？
最新发布
09-15
微信小程序中，`input` 和 `textarea` 元素有时会出现层级穿透的问题，即它们的输入框可能会出现在遮罩层（如模态框）之外，用户难以正常操作。这通常是由于组件层级设置不当导致的。为了解决这个问题，可以采取以下几种方法： 1. **合理布局**：确保所有包含输入框的页面元素都在正确的层级结构中，避免嵌套过深。尽量让需要遮罩保护的组件处在父级组件之下。 2. **使用`mask-view`**：微信小程序提供了一个名为`mask-view`的组件，它可以作为遮罩层叠加在其他元素之上。将输入框放在`mask-view`内部，可以防止层级穿透。 ```html <view> <mask-view></mask-view> <input placeholder="请输入内容" /> </view> ``` 3. **阻止事件冒泡**：如果无法直接使用`mask-view`，可以在处理输入框点击事件时阻止事件向上冒泡，以便于在点击外部区域时关闭遮罩。 ```javascript input.addEventListener('click', function(e) { e.stopPropagation(); }); ``` 4. **自定义组件封装**：如果经常遇到这种需求，可以考虑封装一个带遮罩功能的自定义输入组件，内部包含`input`和`mask-view`，方便统一管理。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

慕容屠苏

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值