输入框VS软键盘

Ella2018 2019-03-18 原文

输入框VS软键盘

最近在做一个h5的时候遇到的问题

我们都知道当页面上的有输入框被选中了，这个时候就回调出键盘用户可以输入。但是安卓手机在弹出键盘时页面的输入框也会被覆盖住；

以下为暂时的解决办法：（以下方法同时解决了ois当失去焦点时，页面高度不能重置的问题）

解决思路：首先判断是机型—-》强制将输入框显示到页面的可视区域内scrollIntoViewIfNeeded（）相当于scrollIntoViewIfNeeded（true）

var u = navigator.userAgent.toLowerCase();

var isARD = u.indexOf(‘android’) > -1 || u.indexOf(‘adr’) > -1;

var isResize

//输入框
$(“#inp_name,#inp_res”).on(“focus”,function(e)
{
　　isResize=false;
})
$(“#inp_name,#inp_res”).on(“blur”,function(e)
{
　　window.scrollTo(0,0);
　　isResize=true;
　　resizeF()
})

if(isARD)
{
　　var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
　　window.addEventListener(“resize”, function()
　　{
　　　　if(document.activeElement.tagName==”INPUT” || document.activeElement.tagName==”TEXTAREA”)
　　　　{
　　　　　　window.setTimeout(function()
　　　　　　{
　　　　　　　　document.activeElement.scrollIntoViewIfNeeded();
　　　　　　　　//document.activeElement.scrollIntoView();
　　　　　　},0);
　　　　}

　　　　var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
　　　　if (clientHeight > nowClientHeight) {/*键盘弹出的事件处理*/}
　　　　else {/*键盘收起的事件处理8*/$(“#inp_name,#inp_res”).blur(); }
　　})
}