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

最新推荐文章于 2025-09-23 11:23:28 发布

原创

最新推荐文章于 2025-09-23 11:23:28 发布 · 9.1k 阅读

2 ·

CC 4.0 BY-SA版权

当微信小程序中的input或textarea输入文字时，可能会遮挡弹出的view。官方表示textarea组件层级最高，无法直接覆盖。一种规避方法是在弹出view时，通过动态样式将input或textarea移出屏幕，避免遮挡。当view隐藏时，再将input移回原来的位置。

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

官方解释：

http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1600

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

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

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

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

<view class="li clear" style="margin-top:{
  
  {top}};">
      <view class="tit ">意向运价</view>
      <view class="rbox ">
        <input disabled="{
  
  {isDisabled}}"  class="col-gray" type="digit" name="pay" placeholder="请输入" />
      </view>
    </view>

margin的方向，任君选择。

弹出view时，将input