screen styling when virtual keyboard is active

Question

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

Solution 1

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/

Solution 2

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> 

Solution 3

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.

Solution 4

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

Solution 5

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

View more solutions

Comments

[nnnnnn]

Why? It is annoying to have things disappear when you're trying to type, but resizing that drastically might make it visible yet difficult or impossible to actually read. (I don't know what iOS does, but on my Android phone if you resized the content like that it would be very hard to read.) Do you plan to do this in both portrait and landscape orientation? By the way, nice ASCII art.

[PicoCreator]

@nnnnnn Its a fluid layout, so it will not resize the text font (stays the same)... is just i want the two separate input boxes (top and bottom) to re-position itself, to be both in view. The irrelevant center content, however would most likely, be made "hidden". And its for both portrait and landscape (though practically only portrait would make sense)

[Ryan Shillington]

+1 to what nnnnn said. Your users won't expect this behavior and won't understand it. Leave it the way it is.

[PicoCreator]

@RyanShillington : Fluid layout, the assumption is that the whole region is text, however all it could be is a single line text input, with the rest being a dynamic background reacting to the updated size (instead of spilling over to "nowhere")

[Andreas]

You could try using a second layout that only displays when the keyboard is visible

[Malitta N]

at the the end of the day, since your ultimate goal would be a user friendly UI, I suggest you leave it the way they are familiar with rather than make things complicated for them.

[PicoCreator]

@graverobber2 exactly what im trying to get =)

[PicoCreator]

+1 for trying : Yup, a custom styling when the keyboard is active... and its also an example on how the content can change without making things too complicated, only the image resizes : not the text... However it misses out the most important point, how to detect the active native keyboard. >.< (not a custom one)

[PicoCreator]

Dun worry, it just website and device browsers... And nope, it didnt work on iOS, cause the browser is not resized, the whole chunk is shifted upwards. While this prevents layout changes, it prevents the size change detection... Which was neat idea =D I honestly hoped it would work, and felt it made sense.

[Praveen Vijayan]

hmm.. I didn't checked it on iOS. It worked fine in my galaxy S. lets check any tweak out there for iOS.:)

[PicoCreator]

Seems like a good enough hack when mixed together ios detection. =) You get the bounty for your efforts in exploring.

[Yuki]

How this can work? If I understood, the meta tag is written when the document loads, this means that if the user focused an element and opened a keyboard after page load - the problem should take place....

[Kamil Bęben]

+1 Although this solution would produce false-positive when user has external keyboard plugged in, it is still way better than calculating some element's height (User can rotate his phone, split his screen. FFS, even desktop user can resize his window).

[vsync]

Other devices which aren't Android might also have virtual keyboard (most likely) so this solution will not work for them, therefor an os-specific solution shouldn't never be used unless all users are guaranteed to use that OS.

[Chunky Chunk]

It's also possible to remove the virtual keyboard on Android from the screen (maybe also on iOS?) while maintaining focus of a textfield.

[REJH]

Actually, Android does resize the viewport when the keyboard is active. Has done so for as long as I know. But I recently ran into the problem with iOS so going to look at that library. Thanks!