收藏
回答

如何解决多个input设置cursor-spacing后,获取焦点时会被键盘遮挡的问题?

给一组input都设置相同的cursor-spacing后,填写完第一个input,直接点击第二个input时,第二个input会被键盘遮挡。

直接点第二个input,键盘正常弹出,填写完第二个input,点击第三个input时,第三个会被键盘遮挡。

以此类推,只有第一次点击的input是正常获得了cursor-spacing。

代码片段:https://developers.weixin.qq.com/s/GqJA35mx7qlE

iphone xr、WeChat version 7.0.17、iOS 14.0

预览、真机调试都会出现这个问题。

使用的是原生键盘,没有用第三方键盘。救救孩子吧……

最后一次编辑于  2020-10-15
回答关注问题邀请回答
收藏

10 个回答

  • 当哩个当
    当哩个当
    04-08

    ios 亲测可以, 将每个input的 always-embed="{{true}}" 可以解决.


    04-08
    有用 5
    回复 1
    • Mimi
      Mimi
      10-27
      亲测不行=。=
      10-27
      回复
  • 邹百亿
    邹百亿
    03-26

    input全部换成textarea ,就没有键盘收齐在弹出的问题,获取键盘高度再定位input的位置,页面会抖动,这个问题腾讯解决不了,问题一直存在,最简单的是,不要把input放在底部,类似于中间弹框输入内容,微信那种流畅的弹框 ,收齐功能,小程序目前无法做到,华为手机跟ios手机问题最大。

    03-26
    有用 1
    回复
  • Mimi
    Mimi
    10-27

    临时解决方案,当点击下面几个input时,页面往下滚动一定高度 . wx.pageScrollTo

    10-27
    有用
    回复
  • a.a浩总
    a.a浩总
    06-11

    关掉input的自动推高adjust-position属性,在input聚焦后获取当前input的bottom,用屏幕高度减去bottom得到input距离底部的高度,bindkeyboardheightchange方法可获取键盘的高度(键盘高度可以设置一个默认值300),当input距离底部的高度小于键盘高度时,把页面往上推适当的高度就不会被挡住了(可使用position)。

    06-11
    有用
    回复
  • yuuk
    yuuk
    2020-12-31

    动态计算了cursor-spacing的值也是不行的。

    2020-12-31
    有用
    回复
  • A.✨
    A.✨
    2020-12-02

    我也再寻找解决方案, 我目前尝试的方案是 判断是否是ios 如果是ios 监听focus 获取键盘高度 然后利用样式将页面顶起来 但ios切换input时 键盘会有几率在短时间内先关闭再弹起 俗称"弹一闪 ", 会导致页面抖一下, 我的解决方案是 判断键盘变化的时长,超过规定时间没变化 再利用样式去控制页面的位置, 顺便说一句ios input没有设置cursor-spacing 页面也会被遮挡啊!

    2020-12-02
    有用
    回复
  • 昵称
    昵称
    2020-10-25

    有好的解决办法了吗?


    2020-10-25
    有用
    回复 3
    • 哇哦
      哇哦
      2020-10-26
      https://developers.weixin.qq.com/s/6XFiknm67ElO
      我暂时的解决方案,从上往下点input被遮挡概率降低,但从下往上点还是会复现。
      2020-10-26
      回复
    • 昵称
      昵称
      2020-10-28回复哇哦
      IOS从下往上,由A input直接点B input 100%复现
      2020-10-28
      回复
    • 哇哦
      哇哦
      2020-10-30回复昵称
      对的,从下往上没有解决,从上往下也只是降低了概率。我感觉只要被点击的元素没有完全显示出来(部分被键盘遮挡),出现问题的概率就要低一点。我封装也是加大点击的范围,然后动态控制focus。
      2020-10-30
      回复
  • Ans
    Ans
    2020-10-24

    你好 我也遇到了这个问题,请问你是否已解决

    2020-10-24
    有用
    回复 1
  • 杨贵堂
    杨贵堂
    2020-10-23

    附议! 看来不是我一个人有这个问题,找方案找了很久也没找到,怎么样官方关注一下,这应该是个bug吧

    我曾尝试用 adjust-position 来处理,但是不知道什么原因,也没起作用

    2020-10-23
    有用
    回复 1
    • 哇哦
      哇哦
      2020-10-23
      等级高的能否帮忙邀请下官方
      2020-10-23
      回复
  • 张有釜
    张有釜
    2020-10-14

    两个思路参考尝试一下

    1.动态控制三个input的cursor-spacing值

    2.点击第二/三个input的时候 先将focus属性设置为true 其他两个设置为false

    拙见

    2020-10-14
    有用
    回复 1
    • 哇哦
      哇哦
      2020-10-15
      思路2:我试了还是不行呢。
      思路1的话,是动态控制的,只是他们都是相同的值。
      感谢您的回复!
      2020-10-15
      回复
登录 后发表内容
问题标签