输入框VS软键盘
输入框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(); }
})
}
function resizeF()
{
setTimeout(function()
{
if(!isResize){return}
ww=$(window).width();hh=$(window).height();
//———-
$(“#wrap”).css({“top”:(hh-defaultH)*.5});
window.scroll(0,0);
},100)
}