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

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

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

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

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

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

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

这是候代码就需要改变了

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

所以就要解决这个问题

方法一:

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

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

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

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

方法二:

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

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

方法三:

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

但是。。。。。。

此事没完。。。。。。

这样写影响了其他页面的滑动问题。其他页面要添加  @touchmove.stop才可以滑动

然后这真是件不友好的事情呢!!

于是 要重新改这部分的内容:

最终经过反复测试  键盘出来后页面可以滑动  我首先给这版块的页面添加了 @touchmove.prevent  放置页面滑动

然而   在距离键盘上方  100px左右的位置  竟然可以滑动  超过就不能滑动了。

于是我就给最外层的背景先注释掉  添加了纯色背景   调出键盘   发现了我的content  部分竟然掉出了页面   然后那个键盘上方能滑动的部分当然就是   content  掉出去的那个内容了。

找到了原因也就好解决了 

最重要的是  给父盒子添加  @touchmove.prevent事件

就这么几行样式就解决了  掉出键盘  页面能滑动的问题

想哭的心都有了。

至于为什么第三种方法  取消不了监听的那个全局的touchmove暂时还没想到。。。

猜你喜欢

转载自blog.csdn.net/a_grain_of_wheat/article/details/104001972
今日推荐