V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
lee88688
V2EX  ›  前端开发

移动端页面中如何处理虚拟键盘弹出导致的页面变形的问题?

  •  
  •   lee88688 · 305 天前 · 804 次点击
    这是一个创建于 305 天前的主题,其中的信息可能已经有所发展或是发生改变。

    最近在写移动端的页面时发现如果虚拟键盘弹出后会导致页面变形,整个页面不太可用。页面的输入框是使用绝对定位,键盘弹出之后输入框也看不见了😂。

    不知道现在有没有关于虚拟键盘检测或者阻止页面因为虚拟键盘弹出变形的 api (我搜索之后好像是没有),目前只能通过 resize 事件检测,然后把输入框移动到顶端避免被遮挡。

    9 条回复    2024-03-06 13:15:18 +08:00
    Track13
        1
    Track13  
       305 天前
    有,但是因为兼容性等于没有。
    https://juejin.cn/post/7261985825089929276
    murmur
        2
    murmur  
       305 天前
    学淘宝这种,如果文本框在底下,点了之后不要出现文本框,而是跳到一个新页面,这个新页面文本框在最上面

    设计的时候就避免把文本框放地下

    当然如果是表单这种流式页面就不管他了
    DOLLOR
        3
    DOLLOR  
       305 天前
    输入框应该尽量避免用绝对定位吧,尤其是移动端的小屏幕,绝对定位能造成很多交互的问题。
    lee88688
        4
    lee88688  
    OP
       305 天前
    @murmur
    @DOLLOR
    这输入框使用绝对定位是业务场景限制的没办法,就是看看有没有其他方法可以打个补丁。
    rabbbit
        5
    rabbbit  
       305 天前
    1 改设计,点击输入框跳转到新页面或弹出弹窗,将输入框放在新页面、弹窗顶部
    2 输入框下面放一个占位的 div ,点击输入框时显示 div 把输入框顶上去
    rabbbit
        6
    rabbbit  
       305 天前
    3 不考虑兼容性就 virtualKeyboard
    lee88688
        7
    lee88688  
    OP
       304 天前
    @rabbbit 我测试了一下当虚拟键盘弹出来的时候整个页面发生比较大的变化,整个布局都乱套了。有没有相关的文章介绍这个的呢?
    euronx
        8
    euronx  
       247 天前
    给 input 框添加 onfocus 事件,把 body 的 style.height 设置为 window.innerHeight 且 overflow: 'hidden'
    euronx
        9
    euronx  
       247 天前
    开发了好几年移动端页面,一直都用的这个方法,一直都没啥问题
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3648 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 10:22 · PVG 18:22 · LAX 02:22 · JFK 05:22
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.