16

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

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

page with portrait keyboard

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

enter image description here

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

Hope this helps.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Doua Beri
  • 10,612
  • 18
  • 89
  • 138
  • Hey Doua Beri! I'm a bit confused what you want from this - are you trying to keep it from zooming in at all? Or are you trying to grab the height of the screen between the keyboard and top when the keyboard is visible? Or do you mean that when the keyboard is visible you want it to look exactly like the second screen shot you posted? – J Cole Morrison Jul 25 '12 at 22:11
  • @JCole I want to grab height of the screen between the keyboard and top when the keyboard is visible. when the keyboard is visible I want to reduce the umber of items to 4 like in the second screen, however this also depends on the first problem, of grabbing the height. This is some examples I gave for a better understanding of the problem. – Doua Beri Jul 26 '12 at 14:15

1 Answers1

36

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

Community
  • 1
  • 1
Yoann
  • 4,937
  • 1
  • 29
  • 47
  • in your example "logo" doesn't disappear until I start typing in the search box – dstarh Jul 25 '12 at 13:07
  • I have test with chorme and firefox with a android phone. I don't have any iOS device so I don't see this behaviour – Yoann Jul 25 '12 at 14:06
  • @dstarh I have ios 5.1 and after I start typing the search box and the keyboard is visible the logo is not disappearing. can you tell us what OS/browser are you using? – Doua Beri Jul 25 '12 at 14:48
  • 1
    @DoubleYo thanks for your help, and thanks for confirming that works on chrome/firefox on adroid. it seems that in ios showing the keyboard doesn't reduce the viewport size, so the only solution is to make a focus implementation. – Doua Beri Jul 25 '12 at 14:53
  • I update the script with LKM solution and it's works fine on iOS an Android now – Yoann Jul 26 '12 at 09:05
  • 1
    @DoubleYo woow .. thanks bro. helps a lot with some basic stuff. – Doua Beri Jul 26 '12 at 14:22
  • I have the same issue but it involves Jquery mobile footer what should i do note: I don't have static class or id to represent the element. All I have is data-role="footer" –  Sep 23 '15 at 06:08
  • Helpful. But `window.innerHeight < initial_screen_size` what about manual user-resize in non-mobile browser, or touch resize in mobile browser? – Alexander Goncharov Jan 17 '17 at 10:05