Can not type inside input element because tablet Keyboard is above it (HTML)

Question

Lets imagine i have a simple page that looks like this: FIDDLE as you can see my Input fields are fixed at the bottom of the screen, i use this website on a Win10 TabletPc in tablet modus .

Now when ever i focus the input fields to type something in, the tablet keyboard pops up as it should and since my inputfields are at the bottom of the screen the keyboard will be shown over it which is not so problemmatic the real problem is that i cannot type anything inside those input fields aslong as the keyboard is over those inputs. I am not sure if this is a common problem because i couldnt find anything online. I also tried to scroll the inputs up when they are focused but unfortunately this doesnt fix it. It only works when i refocus the input element and the keyboard is not hideing it.

Any suggestions are appreciated.

HTML

<div id="mainBody">
//content....
</div>

<div id="footer">
<label>Input1<input type="number" /></label>
<br>
<br>
<label>Input2<input type="number" /></label>
<br>
<br>
<label>Input3<input type="number" /></label>
<br>
<br>
<label>Input4<input type="number" /></label>
</div>

CSS

#footer{
  position: fixed;
  bottom:0;
}

Answer 1

Try using z-index:1 or Make a button for the form and show it on the top of the screen so the user can add text to it normally

$(window).load(function() { 
    $('.buttonform').on('click touchstart', function() {
        $('#footer').show();
         $('#buttonform').hide();
    });
});

---

 <button type="button" class="buttonform">Complete form</button>


    <div id="footer" style="visibility:hidden">
    <label>Input1<input type="number" /></label>
    <br>
    <br>
    <label>Input2<input type="number" /></label>
    <br>
    <br>
    <label>Input3<input type="number" /></label>
    <br>
    <br>
    <label>Input4<input type="number" /></label>
    </div>