无法输入内部输入元素，因为平板电脑键盘位于其上方（HTML）

Question

让我们想象一下，我有一个看起来像这样的简单页面： FIDDLE你可以看到我的输入字段固定在屏幕的底部， 我在平板电脑模式的Win10 TabletPc上使用这个网站 。

现在，当我将输入字段集中在输入字段时，平板电脑键盘会弹出，因为我的输入字段位于屏幕的底部，键盘将显示在它上面，这不是问题，真正的问题是我只要键盘在这些输入上，就不能在这些输入字段中键入任何内容。 我不确定这是否是一个常见的问题，因为我无法在网上找到任何东西。 我还尝试在聚焦时滚动输入，但不幸的是，这并没有解决它。 它仅在我重新聚焦输入元素并且键盘没有隐藏它时才有效。

任何建议表示赞赏。

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

尝试使用z-index:1或为表单创建一个按钮并将其显示在屏幕顶部，以便用户可以正常添加文本

$(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>