当键盘在移动设备上可见时，jQuery / js / html5更改页面内容[重复]

Question

可能重复：
iPad Web App: Detect Virtual Keyboard Using JavaScript in Safari?

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

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

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

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

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

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

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

键盘是否隐藏，页面应该进入阶段 1。

希望这会有所帮助。

Answer 1

我已尝试通过捕获 resize 事件来解决您的问题 这样您就可以知道方向和手势是键盘可见

更新：通过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();
});

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

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>

查看my example page