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

Possible Duplicate:
07000

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

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

我想要的是,通过在屏幕顶部移动输入文本字段,根据新的分辨率(屏幕高度 – 键盘高度),虚拟键盘可见的时间可以更改我的页面内容,然后根据用户在文本字段中输入什么.

这里有一些草图可以看到我在说什么:

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

页面与纵向键盘,标志消失,文本输入移动到顶部,最多显示4项

页面带有风景键盘,标志消失,thext输入移动到顶部并放大,仅显示2个项目

是键盘是隐藏的,页面应该去眩晕1.

希望这可以帮助.

我已经通过捕获resize事件为您的问题尝试了第一个解决方案
有了这个,你可以知道方向和gest是键盘是可见的

更新:添加iOS手机支持与LKM solution

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

http://stackoverflow.com/questions/11600040/jquery-js-html5-change-page-content-when-keyboard-is-visible-on-mobile-devices

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:javascript – jquery / js / html5当键盘在移动设备上可见时更改页面内容