最近使用input输入框 写了移动端的项目 有以下几个问题
1、调出键盘,页面没有上移 ,键盘盖着了输入框。
是因为样式中 定位的问题 元素使用 fixed定位 但是top 一定不能设置为固定值 建议使用 % 。还有其他方法,下面会详细介绍。
2、第一次的需求是 父盒子背景图 不能跟着上移 只有表单部分可以上移
这样书写样式可以让content 部分上移
3、后来我 们的需求变了(很痛苦) 要求背景图部分也要跟着上移。
这是候代码就需要改变了
改成这个样式之后,问题就来了 键盘上面的内容竟然可以上下滑动
所以就要解决这个问题
方法一:
思路:监听页面键盘调起来时间 让父盒子的 top 上移一个 -420px 。
缺点:不同的设备显示就不一样,总有那么几个设备的键盘能遮着输入框的。
用变量控制一个样式 这个样式设置 top: -420px;
当键盘弹出的时候 应用这个样式 当键盘落下的时候 不应用这个样式。
方法二:
思路:动态获取键盘弹起的高度 让父盒子上移
缺点: 还是有那么几个特殊的 就不行。
方法三:
后来在网上找到了 键盘弹起 下面三行代码 就解决了 页面可以滑动的问题。