screen styling when virtual keyboard is active

Ideally, i would want the entire interface to have a custom styling that is seen on the ios (itouch / ipad) or android equivalent with the virtual keyboard present. See below for more details.

A custom set CSS hacking rules to be active, when the keyboard is "present", is also an acceptable solution.

Targets both androids and ios, on a website (HTML/JavaScript/CSS) Also note that the layout inside is: "fluid".

Edit: This was more design, then text; So the changes are not disorientating. At the lowest level, I just desire a design change with and without the virtual keys (Perhaps just a background change).

The question on which, this is a good or bad design idea, is debatable. However, I feel is irrelevant to the question. For such an exploit can have uses more then text (such as games, or interactive media).

Hence the bounty: Despite no longer needing the answer for the project I was working on (an alternative design was used). I still believe this question can benefit from being answered.

Default Behavior

                       +--------+ 
                       |        |
+------------+       +-+-hidden-+-+   <- ~50% hidden
| +--------+ |       | +--------+ |
| |        | |       | |visible | |
| |        | |   \   | |        | |   <- ~50% visible
| |  100%  | |  ==>  | +--------+ |
| |        | |   /   | |virtual | |
| |        | |       | |  keys  | |
| +--------+ |       | +--------+ |
+------------+       +------------+

Desired Behavior

+------------+       +------------+   
| +--------+ |       | +--------+ |
| |        | |       | |visible | |   <- 100% visible (example styling)
| |        | |   \   | |        | |      Custom Styling
| |  100%  | |  ==>  | +--------+ |
| |        | |   /   | |virtual | |
| |        | |       | |  keys  | |
| +--------+ |       | +--------+ |
+------------+       +------------+

I'm not sure, is this the desired effect?. check this link

http://jsfiddle.net/UHdCw/3/

Update

(1). Assuming its a website & running on device browser. Then we can check the presence of virtual keyboard by checking the screen size.

Check in device browser - http://jsfiddle.net/UHdCw/8/show/

code : - http://jsfiddle.net/UHdCw/8/

(2). If you are building native app with HTML5 & Phonegap, things will be different. Since there is no direct API hook to check the keybord status, we have to write our own plugin in Phonegap.

In Android you can check show/hide status of keyboard by using native code [check here]. and have to write Phonegap plugin to get those events in our HTML.

[Phonegap is an example. I think most of the html to native frameworks have this kind of felicity to hook with native code ]

iOS update

As you said there is no change in height/position when keyboard is present. We can do one thing, when input gets the focus we can add shrink class and reduce the element sizes. Check following link.

http://jsfiddle.net/UHdCw/28/show/

I encountered the same problem, this works for me:

<!-- Android Viewport height fix-->
<script type="text/javascript">
var isAndroid = navigator.userAgent.toLowerCase().indexOf("android") > -1; //&& ua.indexOf("mobile");
if(isAndroid) {
    document.write('<meta name="viewport" content="width=device-width,height='+window.innerHeight+', initial-scale=1.0">');
}
</script> 

Have JavaScript apply a class to the body when an input element has focus.

$("input, textarea").focus(function(){  $(document.body).addClass('when-keyboard-showing');     });
$("input, textarea").blur( function(){  $(document.body).removeClass('when-keyboard-showing');  });

And then use @media queries to determine if mobile view:

@media (max-width:550px) { 
    body.when-keyboard-showing .header { height:0; padding:0; }
}

The combination will let you stylize the page when the keyboard is up, on mobile. Thank you.

I had the exact same problem. Here's my solution so far, I'd appreciate if someone could test on Apple: http://jsfiddle.net/marcchehab/f2ytsu8z/show (to see the source code and all: http://jsfiddle.net/marcchehab/f2ytsu8z)

I detect if the keyboard is out in the following way: Upon loading I calculate a variable "sumedges", which is $(window).width() + $(window).height(). Then, in the event of $(window).resize() I compare: If the sum $(window).width() + $(window).height() has become smaller than "sumedges", it means the keyboard is out. This works here on Chrome on Android. You can easily tweak this code to do whatever you like.

var sumedges = $(window).width() + $(window).height();
$(window).resize(function(){
    if($(window).width() + $(window).height() < sumedges) {
    $("#display").html("keyboard out");
  } else {
    $("#display").html("keyboard in");
  }
});

Using jQuery, I found no way to force a smooth transition when you click on an input and the keyboard pops out. But it maybe possible to trick the system: In the fiddle, I set up a fake input (blue). When you click on it, the real input appears just below my display (yellow) and is selected. This way it all looks smooth here on Chrome on Android. Again, I'd appreciate if you guys could test.

$("#fakeinput").click(function(){
    $("#realinput").show().children("input").focus();
  $("html,body").scrollTop($("#display").offset().top);
});

$("#realinput input").blur(function(){
    $("#realinput").hide();
});

I use a simple CSS media query to move active inputs into the top of the screen on mobiles when the keyboard is open. Something like this barebones example:

/* MOBILE KEYBOARD IS OPEN */
@media only screen and (max-width: 430px) and (max-height:400px){
    input:focus{
        position: fixed;
        top:50px;
    }
}