vant 软键盘_移动端页面输入底部被软键盘遮挡问题

概述

近期有个移动端页面的项目，存在需要用户输入的表单信息。因为页面不存在滑动(通过overflow设为hidden的方式)，所以在点击input标签输入信息时，在安卓机下键盘会遮挡页面底部内容，当点击键盘时，焦点所在的 input标签才会显示在视区里。在IOS不存在此问题(在软键盘弹出时，页面会自动顶上去)，存在滑动的页面里也不存在该问题。

目前的解决方案一览

通过 window.onresize 监听页面大小变化，然后通过 window.scrollTo 使页面滚动到所需位置

通过 Element.scrollIntoView()

通过 Element.scrollIntoViewIfNeeded()

window.scrollTo

没什么好解释的上代码

window.onresize = function () {

if (document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "TEXTAREA") {

setTimeout(function () {

var top = document.activeElement.getBoundingClientRect().top;

window.scrollTo(0,top);

}, 0);

}

}

提一下，因为iphone不存在此问题，可以加一个限制条件在android以外的终端下不执行此端代码

var ua = navigator.userAgent;