评论

input键盘弹出时,滚动页面,输入框内容错位问题

解决在弹出键盘时,快速滚动页面,导致输入框内容的错位问题

在ios9.+的版本上,遇到了一个问题。在键盘弹出的时候,快速滚动页面,输入的内容或input提示语会错位。且有时无法恢复到原有位置。当然,前提是你这个页面是超过一屏需要滚动的时候

解决办法:

1 页面可通过样式的滚动(overflow-y: auto)来写,但是不要用 -webkit-overflow-scrolling: touch;

2页面用scroll-view,通过变量{sysScroll}来控制

view: 
<scroll-view scroll-y="{{sysScroll}}"  scroll-top="{{scrollTop}}" class="scroll-hei-2 bg-def">
    <form >
      <input bindfocus="onfocus" bindblur="onblur" />
    </form>
</scroll-view>


js: 
  onfocus: function() {
    this.setData({sysScroll: false})
  },
  onblur: function (e, param, inst) {
    this.setData({sysScroll: true})
  }




最后一次编辑于  2020-05-26  
点赞 4
收藏
评论

9 个评论

  • 黄小羽
    黄小羽
    2020-09-02

    试一下这个属性 always-embed = true

    2020-09-02
    赞同 2
    回复 2
    • 平淡是真~
      平淡是真~
      2020-09-11
      有效
      2020-09-11
      回复
    • jessie
      jessie
      2020-12-07
      有效+1
      2020-12-07
      回复
  • 古怪肥猫
    古怪肥猫
    2020-05-26

    我们也遇到这个问题,scroll-view中使用input在ios端会出现这种错位

    2020-05-26
    赞同 1
    回复 1
    • 🌙
      🌙
      2020-05-27
      哈哈 可以尝试下我说的方法
      2020-05-27
      回复
  • shao
    shao
    01-06

    最后 还是父容器 没有用scroll-view 用的view height:auto 解决的

    01-06
    赞同
    回复
  • 想早点回家
    想早点回家
    2020-11-23

    用第二种方法,我也遇到了,input会先错位再回位的情况,视觉上很明显

    2020-11-23
    赞同
    回复 1
    • 🌙
      🌙
      2020-11-24
      或者你可以试试别人提到的 always-embed = true
      2020-11-24
      回复
  • 我母鸡啊!
    我母鸡啊!
    2020-07-18

    哈哈哈哈 同样遇到了这个问题,学习了

    2020-07-18
    赞同
    回复
  • 栉风
    栉风
    2020-06-29

    用textarea可以避开这个问题,但是没有type属性了,我怎么让它只能调数字键盘呢

    2020-06-29
    赞同
    回复 1
    • 🌙
      🌙
      2020-06-29
      嗯嗯,没有试过,你尝试一下~数字, 文字,还有换行。至于我说的第二种方法,我还没出现到,后面我再去验证一下
      2020-06-29
      回复
  • 徐正
    徐正
    2020-06-22

    请问这问题还没修复吗

    2020-06-22
    赞同
    回复 3
    • 🌙
      🌙
      2020-06-22
      官方的不清楚,目前我的解决文案是第二种~
      2020-06-22
      回复
    • 徐正
      徐正
      2020-06-22回复🌙
      用到的input太多了,这样处理太繁琐了
      2020-06-22
      回复
    • 🌙
      🌙
      2020-06-22回复徐正
      嗯嗯,我这边是数据生成的,也觉得挺麻烦的。你可以尝试下新的解决方法~有好的,我们来分享一下 😄
      2020-06-22
      回复
  • 隘狭
    隘狭
    2020-06-12

    我出现了一样的问题,把scroll-view去掉就好了

    2020-06-12
    赞同
    回复 3
    • 🌙
      🌙
      2020-06-12
      嗯嗯,缓慢的滚动是没有问题的,但是流畅快速的滚动还是会有问题的
      2020-06-12
      回复
    • 隘狭
      隘狭
      2020-06-12回复🌙
      特别是在底部的输入框,键盘会默认上推页面,我的输入框都跑页面顶部去了,这么严重且明显的问题不知道为什么微信还没解决
      2020-06-12
      回复
    • 🌙
      🌙
      2020-06-12回复隘狭
      不知道了。而且一更新版本,之前做的兼容就没用了。试了几次。在公众号上。小程序会比公众号好一些,目前在小程序上我除了上面那个问题比较难搞,其它都还好
      2020-06-12
      回复
  • 🌙
    🌙
    2020-05-27

    第二种方法我觉得是相对较好的方法,就是比较麻烦,需要在每个input里添加bindfocus, bindblur

    2020-05-27
    赞同
    回复 4
    • Aris.D
      Aris.D
      2020-06-18
      第二种方法楼主这边有延迟吗?我这边用了会有延迟出现,就是先错位再回位,用的是uni-app,不知道是不是框架延迟
      2020-06-18
      1
      回复
    • 🌙
      🌙
      2020-06-18回复Aris.D
      没~目前测试没有测出这个问题。应该跟框架没有关系吧,可以先排查下方法是否生效
      2020-06-18
      回复
    • 栉风
      栉风
      2020-06-29
      这个方法现在好像也不顶用了 还是会出现这种情况
      2020-06-29
      回复
    • GUAN
      GUAN
      2020-07-15回复Aris.D
      请问有找到问题吗?我和你一样是使用的uni-app,一样的问题
      2020-07-15
      1
      回复
登录 后发表内容