V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
feikeq
V2EX  ›  问与答

网页怎么判断 iPhone 或 iPad 已经弹出虚拟键盘,并得到当前页面的可视区域?

  •  
  •   feikeq · 2014-04-24 16:19:40 +08:00 · 11517 次点击
    这是一个创建于 3626 天前的主题,其中的信息可能已经有所发展或是发生改变。
    我在一个页面里有一个输入表单用到了position:fixed实现固定在底部显示,
    但当点击文本输入框时ios会自动弹出虚拟键盘,
    这样在safari里这个表单还将固定在底部,这样就被键盘给挡住了(永远看不到输入框)。
    有时候在弹出键盘时这个表单却往上移到了可视屏中间位置(与弹出的键盘还有一定距离),
    看着好凌乱的感觉...

    关键弹虚拟键盘时网页都不触发任何事件,我什么都捕获不到..scroll和resize都不激活。。。
    但其实网页高度和滚动条都变化了。。
    键盘弹出后 document.body.clientHeight 高度没有变化..

    有没有好办法捕获到键盘弹出后可视屏幕的高度?
    CSS和JS实现均可,谢谢!
    4 条回复    1970-01-01 08:00:00 +08:00
    feikeq
        1
    feikeq  
    OP
       2014-04-24 16:40:26 +08:00
    @media screen and (max-height: 460px) 用这种CSS也没效果,因为好像屏幕高度就是没有变化,而只是贴了个键盘在页面上。。。
    razios
        2
    razios  
       2014-04-24 17:16:30 +08:00 via iPhone
    用文本输入栏获取焦点触发js
    feikeq
        3
    feikeq  
    OP
       2014-04-25 10:35:48 +08:00
    @razios 我也用这方法试了 $(document).on("focus","input, textarea, select", function( e ) {

    //但最主要是不知道弹出键盘后可视区域的大小,所以不好定位这个div为fixed的位置..
    //并且不横屏竖屏不可视区域不一样ipad和ipone4区域也不一样。。。怎么办?
    return "万分感谢!!";
    };
    feikeq
        4
    feikeq  
    OP
       2014-04-25 10:55:03 +08:00   ❤️ 1
    有关position:fixed的bug在另一篇博文中《移动端web页面使用position:fixed问题总结》也有总结。

    另外强调一点,不要在Fixed区域中直接使用input或textarea元素。在fixed元素中的input获取焦点之后,弹出软键盘会带来很多额外的问题,如:

    在iOS下软键盘弹出,fixed定位会出问题;
    在Android下软件盘弹出,可能会导致输入区域被遮挡;
    点击input弹出一个新视图来完成后续输入,是一种比较好的解决方案,下图是一个基于iScroll的页面结构实现:

    https://github.com/maxzhang/maxzhang.github.com/issues/2
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1122 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 22:50 · PVG 06:50 · LAX 15:50 · JFK 18:50
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.