1

假设我有一个简单的页面，如下所示：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;
}
4

1 回答 1

0

尝试使用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>
于 2017-04-10T08:25:36.577 回答