Screen Styling When Virtual Keyboard Is Active

screen styling when virtual keyboard is active

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/

Detect virtual keyboard on screen and landscape orientation in javascript

The short answer:

No, unfortunately there is no current way to detect when the virtual keyboard appears on screen. Detecting orientation yes, that's possible using:

css media queries (as per you example)
via JavaScript using the orientationchange listener.
via JavaScript using the resize listener and inferring the orientation using window.innerHeight > window.innerWidth

The long answer:

There should be no reason why the keyboard affects the orientation property that is interpreted by your css media query as follows:

@media screen and (orientation: landscape) {
    ...
}

The W3C media queries recomendation states the following for the orientation property:

The ‘orientation’ media feature is ‘portrait’ when the value of the ‘height’ media feature is greater than or equal to the value of the ‘width’ media feature. Otherwise ‘orientation’ is ‘landscape’.

The keyboard being visible when you type in the forms textbox field simply should not trigger the orientation property to change.

I have in the past had your issue occur when using device emulators, such as Device Mode in older versions of Google Chrome's devtools. However, when it was tested on real mobile device/s the issue did not occur.

Also, there is this bug open in mobile chrome that may be causing resize events to fire when the keyboard appears.

Perhaps the emulator, if that's what you are using, is incorrectly causing the the viewports height to change therefore causing the change to the orientationproperty in your media query.

The simple gist I provided below does the following (You could try running it in your dev environment to see what happens):

When the mobile device is in portrait orientation the screen shows two form input fields (displaying the words: 'foo' and 'baz').
When I touch either of the form input fields the keyboard is displayed and there is no change to the content of the page.
When the device it rotated 90 degrees to landscape orientation a gray panel appears showing the words: "Rotate your device to portrait"

NOTE: The steps listed above are what happens when testing the gist below on several real mobile devices running Safari on iOS and mobile Chrome on Android (...not emulators!).

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>StackOveflow question 40175207</title>
    <meta name="description" content="Example gist using orientation css media query to hsow message when device is landscape" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
<style type="text/css">

body {
    padding: 0;
    margin: 0;
}

.wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.message-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: gray;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);

    will-change: transform;
}

.message-panel__text {
    position: absolute;
    top: 50%;
    text-align: center;
    font: 1em Helvetica, sans-serif;
    width: 100%;
    height: 50px;
    margin: auto;
    -webkit-transform: translateX(-50%);
            transform: translateY(-50%);
}

@media screen and (orientation: landscape) {
    .message-panel {
        transform: translateX(0);
    }
}

</style>

</head>
<body>
    <div class="wrapper">
        <form>
            <input type="text" name="input-one" value="foo">
            <input type="text" name="input-two" value="baz">
        </form>
        <div class="message-panel">
            <div class="message-panel__text">Rotate your device to portrait</div>
        </div>
    </div>
</body>
</html>

PS: There is also Web App Manifest in Chrome for Android which allows you to lock the orientation of the device too. See here for further info.

Hope this helps!

Handle virtual keyboard on Windows 8 tablet

You could get the relative position of the text field in comparison to the screen resolution and if the field lays on the 2nd vertical half (i.e. the space that covers the keyboard after appearing), scroll down the webpage for a fixed amount of pixels.

If you use jQuery, you could use the jquery.scrollTo plugin to scroll to the field with a vertical negative offset, so the field is always visible.

Plugin site: https://github.com/flesler/jquery.scrollTo

Hope this helps!

I have no Windows tablet to be sure of how the OS manages the keyboard pop-up, but this method has worked for me on Android and iOS.

How to prevent iOS keyboard from pushing the view off screen with CSS or JS

first

<script type="text/javascript">
 $(document).ready(function() {
     document.ontouchmove = function(e){
          e.preventDefault();
          }
 });

then this

input.onfocus = function () {
    window.scrollTo(0, 0);
    document.body.scrollTop = 0;
}

Screen Styling When Virtual Keyboard Is Active