关于ios软键盘弹出遮挡底部定位输入框的问题?

1,457 阅读1分钟

问题场景

再apicloud开发环境下,ios弹出的软键盘会遮挡用fixed定位再页面底部的input输入框。 期望的场景应该是弹出软键盘时,input输入框浮在软键盘的上方。

分析问题

刚开始也是百思不得其解,从网上百度来的答案是这样的

在聚焦时将页面增加软件盘的高度,并向下滚动软键盘的高度达到上述效果。

但是仍然存在问题,在页面顶部弹出软键盘是没有问题的。

但是乡下滚动一些距离之后还是无法显示出来。本来自己就菜,这下让我更抓狂了。

解决方案

不给过还好我弹出输入框时,也弹出了一个遮罩层,遮罩层大小和屏幕大小是一样的。

并且我发现弹出软键盘时连这个遮罩层也不见了。我试着滚动了一下,原来在上面。

我有仔细看了下弹出键盘的过程。原来键盘会将整个页面向上推,而且页面也会滚动到最下方。

于是我写了样式

我将整个页面的母div用绝对定位,这个时候视口本身就不会滚动了。弹出软键盘时就无法造成页面滚动。页面div和fixed定位的input始终在与原来的位置。这样就解决了。