16

可能重复：
iPad Web App：在 Safari 中使用 JavaScript 检测虚拟键盘？

我正在为网站构建移动版本，如果我可以使用 jQuery/js/html5 或任何其他技术创建在虚拟键盘可见时可以在移动应用程序上制作的相同分屏效果，我很感兴趣。

例如，如果用户进入我的网页并单击输入文本字段，则会显示虚拟键盘并且浏览器会自动缩放到输入文本字段所在的区域。

我想要的是能够根据新的分辨率（屏幕高度 - 键盘高度）在虚拟键盘可见时更改我的页面内容，方法是移动屏幕顶部的输入文本字段，然后根据一些提示用户在文本字段中输入的内容。

这里有一些草图，看看我在说什么：

这是没有键盘的页面视图，基于搜索的结果：

没有键盘的页面

带有纵向键盘的页面，徽标消失，文本输入移动到顶部，最多显示 4 个项目

带有纵向键盘的页面

横向键盘的页面，logo消失，然后输入移到顶部并被放大，只显示2个项目

在此处输入图像描述

如果键盘被隐藏，页面应该进入阶段 1。

希望这可以帮助。

4

1 回答 1

36

我已经尝试通过捕获调整大小事件来解决您的问题的第一个解决方案，您可以知道方向和 gest 是键盘可见

更新：使用LKM 解决方案添加 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();
});

现在您可以显示和隐藏徽标和一些订单项

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>

查看我的示例页面

于 2012-07-25T12:56:51.937 回答