输入框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)

}

posted on 2019-03-18 14:09 小迷糊之糊里糊涂阅读(...) 评论(...) 编辑收藏

刷新评论刷新页面返回顶部