当键盘在移动设备上可见时，jquery / js / html5更改页面内容 [英] jquery/js/html5 change page content when keyboard is visible on mobile devices

问题描述

可能存在重复：

  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>徽标< / div> 
< input type =text>< input type =submitvalue =search> 
< ul> 
< li>商品< / li> 
< li>商品< / li> 
< li>商品< / li> 
< li>商品< / li> 
< li>商品< / li> 
< li>商品< / li> 
< li>商品< / li> 
< li>商品< / li> 
< / ul> 
  

查看我的示例页面

Possible Duplicate:
iPad Web App: Detect Virtual Keyboard Using JavaScript in Safari?

I'm building a mobile version for a website, and I'm interested if I can create using jquery/js/html5 or any other technology the same split screen effect that can be made on mobile apps when virtual keyboard is visible.

For example if a user enters my webpage and clicks on an input text field, the virtual keyboard is showed and the browser automatically zooms to the area where the input text field is.

What I want is to be able to change my page content the moment the virtual keyboard is visible based on the new resolution( screen height - keyboard height), by moving the input text field on top of the screen, followed by some tips depending on what the user enters in the text field.

Here are some sketches to see what I am talking about:

This is the page view without keyboard, results based on the search:

page with portrait keyboard, the logo disappears, the text input moves to top, and a max 4 items are showed

page with landscape keyboard, the logo disappears, thext input moves to top and is enlarged, only 2 items are showed

is the keyboard is hidden, the page should go to faze 1.

Hope this helps.

解决方案

I have tried a first solution for your problem by catching the resize event With that you can know the orientation and gest is the keyboard is visible

UPDATE : adding iOS mobile safari support with 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();
});

Now you can show and hide the logo and some line item

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();
    }
}

For the JS based on this HTML

<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>

Check out my example page

这篇关于当键盘在移动设备上可见时，jquery / js / html5更改页面内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！