移动端H5键盘收起底部留白问题解决

2024-06-09 03:05| 来源: 网络整理| 查看: 265

部分移动设备上存在这个问题，百度搜索千篇一律是window.scroll

这是解决问题的方法，但不是发现问题的根源，你要想解决问题，首先得定位找到发生的情况

大部分键盘收起会触发失去焦点事件，那么监听失去焦点事件blur或许不错

$("#input").blur(function(){ setTimeout(function(){ var height = $(window).height(); $(window).scrollTop(height); },100) });

但是如果仅仅这样，那你真实太天真了,因为在部分机型上，键盘收起并不会触发blur ,有的甚至不会失去焦点，光标还在，键盘没有了，底部一片空白

这个时候，就需要上终极武器 : resize ,因为键盘弹起和收起都会触发resize 用这个来触发blur试试

const el = document.documentElement || document.body const originHeight = el.clientHeight; $(window).resize(function(){ const resizeHeight = el.clientHeight if (resizeHeight < originHeight) { //alert('键盘弹起') } else { //alert('键盘收起') $("#input").blur(); //触发blur事件 } })

这样应该可以解决问题，

PS 两个部分代码都需要

【本文地址】

公司简介

联系我们