IOS版微信收起软键盘时出现空白

要做一个整屏的有背景色的登陆页面,遇到的一些实现方法和踩过的坑记录一下:

1.整屏有颜色的,高度不设置100%,给html,body设置背景色;

    如果设置高度100%,在部分IOS手机上,input框选中再失去焦点之后会没办法点击,焦点在键盘弹起时的位置;

    如果设置固定值的高度,体验会不好,会上拉出现一节没有内容的页面,也会出现软键盘收起时出现白条。

2.底部有固定定位导航条的,软键盘弹起会置于软键盘上面,即固定定位相对于可视区域来定位的;

3.在IOS12+的V6.7.4+的微信上,会出现软键盘收起时出现空白;

    下面针对这点作出的解决方法:

(1)用focus和blur来判断键盘的弹出和收起状态;

(2)由于页面中有多个input,所以需要定义几个flag字段来判断页面是否没有focus的input,然后才将页面滚动到顶部;

(3)对input遍历绑定一下focus事件,给flag赋值为true;

(4)对input遍历绑定一下blur事件,当所有的input都处于blur状态,即flag都为false的时候,页面滚动到顶部;

(5)在blur事件中判断flag值的时候,存在focus事件给flag赋值的异步问题,所以在blur判断的时候加一个延迟定时器,再进行判断。

(6)这种通过全局设置变量的,绑定事件的时候需要用$("#...").on("click",function(){})这种方法,而不能在行内通过onclick来设置,否则判断全局变量值的时候会出现undefined的情况。

(7)代码如下:

你可能感兴趣的:(IOS版微信收起软键盘时出现空白)