解决安卓软键盘弹起遮挡输入框的问题

解决安卓软键盘弹起遮挡输入框的问题

在开发微信网页的时候,遇到的问题.调试工具查看效果时并没有问题,打包发布时问题就出现了,安卓机型并没有对光标锁定输入框时,做出让输入框移动到屏幕中间的处理,导致软键盘弹出遮挡住了输入框,然而移动端并没有监听软键盘弹起及收回的事件,所以我们可以监听输入框的点击事件来做出相应的处理.

解决

给输入框绑定点击事件 代码片.

@click="isAndroid"

注册让输入框移动到屏幕中间方法 代码片.

isAndroid(){
    window.addEventListener("resize", function() {
	    if(document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "TEXTAREA") {
	  	    window.setTimeout(function() {
	  	      document.activeElement.scrollIntoViewIfNeeded();
	  	    }, 0)
	    }
	})
}

解决