Div覆盖了我在手机上的输入

Question

我正在创建一个Web应用程序，但我的css有问题。

我有一个<div>用这个css代码固定在底部

<div id="menu" style="background-color: rgb(255, 255, 255); bottom: 0px; position: fixed; left: 0px; width: 100%; box-shadow: 1px 1px 4px 3px rgba(0, 0, 0, 0.32); margin-top: 80px; overflow: hidden;">

</div>

问题出现在手机上我输入<input type="text">上的文字，我的div覆盖了我的输入，我需要滚动页面才能看到我正在写的内容。

我如何解决这个问题？

谢谢！

Answer 1

您可以在聚焦输入时尝试隐藏它。有一些技巧要做，这取决于你的代码编写方式以及应用程序的工作方式。

最简单的方法，但也许不是最好的方式是这样的

$(document).ready(function() {  

$("input").click(function(){
        $("#menu").hide();
            }).blur(function(){$("#menu").show();
});

但在这种情况下，它需要页面上的所有输入。这只是您可以改变和改进的示例解决方案。此外，您应该只在手机上使用它。 还有一个解决方案，您可以验证移动屏幕的更改，表明用户已显示键盘 - 当屏幕高度发生变化时，您隐藏/显示覆盖div。