<分区>
Possible Duplicate:
iPad Web App: Detect Virtual Keyboard Using JavaScript in Safari?
我正在为网站构建一个移动版本，如果我可以使用 jQuery/js/html5 或任何其他技术创建虚拟键盘可见时可以在移动应用程序上实现的相同分屏效果，我很感兴趣.
例如，如果用户进入我的网页并单击输入文本字段，则会显示虚拟键盘并且浏览器会自动缩放到输入文本字段所在的区域。
我想要的是能够根据新分辨率(屏幕高度 - 键盘高度)在虚拟键盘可见时更改我的页面内容，方法是将输入文本字段移动到屏幕顶部，然后是一些提示取决于用户在文本字段中输入的内容。
这里有一些草图可以看出我在说什么:
这是没有键盘的页面 View ，基于搜索的结果:
纵向键盘的页面，logo 消失，文本输入移到顶部，最多显示 4 个项目
带有横向键盘的页面， Logo 消失，然后输入移动到顶部并放大，仅显示 2 个项目
如果键盘被隐藏，页面应该进入阶段 1。
希望这对您有所帮助。
最佳答案
我已经尝试通过捕获调整大小事件来解决您的问题 这样你就可以知道方向和手势是键盘是可见的
更新:使用 LKM solution 添加 iOS 移动 safari 支持
var is_keyboard = false;
var is_landscape = false;
var initial_screen_size = window.innerHeight;
/* Android */
window.addEventListener("resize", function() {
is_keyboard = (window.innerHeight < initial_screen_size);
is_landscape = (screen.height < screen.width);
updateViews();
}, false);
/* iOS */
$("input").bind("focus blur",function() {
$(window).scrollTop(10);
is_keyboard = $(window).scrollTop() > 0;
$(window).scrollTop(0);
updateViews();
});
现在您可以显示和隐藏 Logo 和一些订单项
function updateViews() {
$("li").hide();
if (is_keyboard) {
$("#logo").hide();
if (is_landscape) {
$("li").slice(0, 2).show();
}
else {
$("li").slice(0, 4).show();
}
}
else {
$("#logo").show();
$("li").show();
}
}
对于基于这个HTML的JS
<div id="logo">Logo</div>
<input type="text"><input type="submit" value="search">
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
关于javascript - 当键盘在移动设备上可见时，jQuery/js/html5 更改页面内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11600040/