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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 3866 天前的主题，其中的信息可能已经有所发展或是发生改变。

我在一个页面里有一个输入表单用到了position:fixed实现固定在底部显示，
但当点击文本输入框时ios会自动弹出虚拟键盘，
这样在safari里这个表单还将固定在底部，这样就被键盘给挡住了（永远看不到输入框）。
有时候在弹出键盘时这个表单却往上移到了可视屏中间位置(与弹出的键盘还有一定距离)，
看着好凌乱的感觉...

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

有没有好办法捕获到键盘弹出后可视屏幕的高度？
CSS和JS实现均可，谢谢！

键盘

弹出

表单

4 条回复 • 1970-01-01 08:00:00 +08:00

feikeq

2014-04-24 16:40:26 +08:00

@media screen and (max-height: 460px) 用这种CSS也没效果，因为好像屏幕高度就是没有变化，而只是贴了个键盘在页面上。。。

razios

2014-04-24 17:16:30 +08:00 via iPhone

用文本输入栏获取焦点触发js

feikeq

2014-04-25 10:35:48 +08:00

@razios 我也用这方法试了 $(document).on("focus","input, textarea, select", function( e ) {

//但最主要是不知道弹出键盘后可视区域的大小，所以不好定位这个div为fixed的位置..
//并且不横屏竖屏不可视区域不一样ipad和ipone4区域也不一样。。。怎么办？
return "万分感谢！！";
};

feikeq

2014-04-25 10:55:03 +08:00

有关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