当键盘在移动设备上可见时，jquery / js / html5更改页面内容

Question

  

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

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

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

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

以下是一些草图，看看我在说什么：

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

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

带有横向键盘的页面，徽标消失，文本输入移到顶部并放大，只显示2个项目

键盘是隐藏的，页面应该去fze 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