无法在输入元素内输入，因为平板电脑键盘在其上方（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>