8

Working on a mobile html5 app, on Android using chrome browser behaviour is good but once added to homescreen and used in full screen mode I run into the following problem:

When pressing the text input positioned in the footer the page does not move up - the keyboard covers it so you can't see what you are typing.

I need it to push the page normaly up just as when it is viewed in browser mode

This is what I have in the header: 

 <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">

and the bottom footer:

<div class="footer pos-fixed">
<div class="container">
    <div class="container">
        <form class="form-inline" role="form" id="ajax-message" method="post" action="blabla">

                    <input name="conversation_id" value="1" type="hidden">
                    <input name="receipient_id" value="14" type="hidden">

                <div class="marg-10">
                        <textarea style="" class="text-input-box" name="message" rows="1"></textarea>

                <button class="btn btn-primary btn-sm pull-right" type="submit"><i class="fa fa-check"></i> Send</button>
                </div>


                <input name="_token" value="xx" type="hidden">
        </form>
    </div>
</div>

ps: I am also using latest bootsrap & jquery

Aravindan K
  • 101
  • 3
  • 18
commandantp
  • 947
  • 1
  • 12
  • 25
  • Sadly, even innerHeight/outerHeight/screen.height doesn't change when opening keyboard on fullscreen. – Artur May 05 '18 at 23:24

1 Answers1

3

Old post, but for anyone needing a solution -- here's my personal approach ...

HTML

<form>
  <input type="email" id="inputEmail">
  <input type="password" id="inputPassword">
</form>

JavaScript

var deviceIsAndroid = /(android)/i.test(navigator.userAgent);

$(document).ready(function () {
    if (deviceIsAndroid) {
        $(document).bind("click", function () {
            if (document.activeElement.nodeName == 'TEXTAREA' || document.activeElement.nodeName == 'INPUT') {
                var textBox = document.activeElement.id;
                document.getElementById(textBox).scrollIntoView();
            }
        });
    }
});

The first part makes it Android specific (in the event that the application/site is accessible on other devices).
Any click will trigger the function, but nothing will happen unless it occurs in a textArea or input field.
This can be simplified even further if you're only working with a single, field type ... 

$("input").bind("click", function () {
    var textBox = document.activeElement.id;
    document.getElementById(textBox).scrollIntoView();
});
Dustin Halstead
  • 741
  • 6
  • 19