Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Detect virtual keyboard on screen and landscape orientation in javascript

Am working on a html based mobile app where there is requirement to design app only for portrait orientation and display message to user when he goes to landscape, This feature is working fine with css media query but problem is this that I have a form in app and when I click on any of the textbox and virtual keyboard opens and screen height changes and it shows me message for orientation change

Now I want to ask if there any way to different when actually orientation changes and when virtual keyboard on screen appears. Thanks in advance

@media screen and (orientation: landscape) {

}

I have checked other questions related to my topic on stackoverflow but nothing helpful there

like image 371
Umair Khalid Avatar asked Oct 21 '16 11:10

Umair Khalid


3 Answers

You can detect focus on input. It is very likely that the device will show a virtual keyboard in the mobile version of your application. To find out, you can compare the height of some element. For example, the application was 800 pixels high, nothing changed (there was no screen flip), but the height changed and now it is 500 pixels. And also you know that the focus is on the input field. This may mean that a virtual keyboard has appeared on the screen. Or not in some cases :)

like image 99
Ilay Vasilyev Avatar answered Nov 04 '22 21:11

Ilay Vasilyev


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:

  1. css media queries (as per you example)
  2. via JavaScript using the orientationchange listener.
  3. 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):

  1. When the mobile device is in portrait orientation the screen shows two form input fields (displaying the words: 'foo' and 'baz').
  2. When I touch either of the form input fields the keyboard is displayed and there is no change to the content of the page.
  3. 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!

like image 6
RobC Avatar answered Nov 04 '22 21:11

RobC


You can't detect whether there is or is not the virtual keyboard only using CSS. You'll need to use some javascript.

If you are using Cordova to build the app, try using the Keyboard plugin. It fires an event whenever keyboard is shown or hidden, so that you can respond to it somehow, ie. add some class to <body> that will prevent showing the message.

https://github.com/driftyco/ionic-plugin-keyboard

Another approach would be to listen to "focus" event on all possible elements that can cause the keyboard to appear.

$(document.body).on("focus", "textarea, input", function() {
   $(document.body).addClass("do-not-show-message");
}).on("blur", "textarea, input", function() {
   $(document.body).removeClass("do-not-show-message");
});;
like image 5
Ondra Koupil Avatar answered Nov 04 '22 19:11

Ondra Koupil