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)代码如下:

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容