移动端软件盘遮挡输入框问题

Posted 2020-10-15 欢乐之家

第一、首先解决软键盘影响布局的问题：

　　软键盘弹出会改变浏览器可视区域的高度，安卓会触发window.resize事件，ios不会触发，所以如果页面元素的布局是以窗口大小为基准的话，会出现布局混乱；比如body的height：100%等等，

　　所以需要在页面初始化完成后执行这段代码（固定body的高度，不让他自适应）

　　$(document).ready(function () {

　　　　$(\'body\').height($(\'body\')[0].clientHeight);

　　});

第二、区分输入框被遮挡的类型

　　输入框的高度目测最高是页面可视区域的一半，即1/2手机屏幕宽度，所以如果所有输入框都在页面上半部分，就不存在软键盘遮挡输入框的问题

　　（1）、输入框在页面的底部且第一个输入框在页面下半部分

　　　　输入框组用绝对定位定位到页面底部。当软键盘弹出时也就自动把所有的输入框弹上去

　　（2）、输入框组的总高度大于1/2页面高度

　　　　给每个输入框做focuse监听事件或者直接监听window.resize事件（如果使用的是第三方输入法的话，需要把下面的代码放到时间函数内部）

　　　　　　document.activeElement.scrollIntoView(false);

　　　　　　document.activeElement.scrollIntoViewIfNeeded();

　　　　　　或者

　　　　　　function scrollT(){

　　　　　　　　$("html,body").animate({scrollTop: $(".fI_now").offset().top}, 300);

　　　　　　}

　　　　

参考网址：

深入理解滚动scroll：https://www.cnblogs.com/xiaohuochai/p/5831640.html