输入框VS软键盘

时间:2022-08-25 07:24:21

最近在做一个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)
}