关于使用input调出系统键盘,页面上移滑动问题

时间:2024-04-07 16:04:32

最近使用input输入框 写了移动端的项目  有以下几个问题

1、调出键盘,页面没有上移 ,键盘盖着了输入框。

是因为样式中  定位的问题   元素使用  fixed定位   但是top  一定不能设置为固定值  建议使用  %   。还有其他方法,下面会详细介绍。

2、第一次的需求是  父盒子背景图  不能跟着上移   只有表单部分可以上移

关于使用input调出系统键盘,页面上移滑动问题

这样书写样式可以让content 部分上移  

3、后来我 们的需求变了(很痛苦)  要求背景图部分也要跟着上移。

这是候代码就需要改变了

关于使用input调出系统键盘,页面上移滑动问题

改成这个样式之后,问题就来了   键盘上面的内容竟然可以上下滑动    

所以就要解决这个问题

方法一:

思路:监听页面键盘调起来时间   让父盒子的  top  上移一个  -420px    。

缺点:不同的设备显示就不一样,总有那么几个设备的键盘能遮着输入框的。

用变量控制一个样式   这个样式设置  top: -420px;

当键盘弹出的时候 应用这个样式  当键盘落下的时候   不应用这个样式。

方法二:

思路:动态获取键盘弹起的高度  让父盒子上移   

缺点: 还是有那么几个特殊的  就不行。

方法三:

关于使用input调出系统键盘,页面上移滑动问题

后来在网上找到了  键盘弹起   下面三行代码   就解决了  页面可以滑动的问题。