钉钉内web页面安卓手机键盘遮挡输入框

问题:
公司内部流程是基于钉钉app开发,最近用户提出安卓部分手机,输入信息时候,键盘遮挡输入框
解决问题历程:
网上各种搜索‘安卓键盘遮挡输入框,各种尝试,然而并不适用,只能自己解决

解决方案:
元素位于屏幕1/2以下,这时需要手动滚动页面,让元素当键盘弹出时位于可视区域;

  //屏幕的1/2高度
var halfHeight =  (browserHeight - headerHeight)/2;
var isAndroid= navigator.platform.toLowerCase();
var isFlag = false;
$(document).on("focus","input[type='text']",function(){
   if(!/iphone/.test(isAndrod)) {
        var bodyScroll = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
       var topHeight =$(this)[0].getBoundingClientRect().top+document.documentElement.scrollTop;

     if(topHeight+$(this).height() > halfHeight){//屏幕下方
         if($("#coverBtm").length == 1){
              $("#coverBtm").css("height",(halfHeight)+'px');
         }else{
              $('body').append("
") } var gundong = bodyScroll + topHeight; $('body').scrollTop(gundong); isFlag = true; } } }) $(document).on("blur","input[type='text']",function(){ if(!/iphone/.test(isAndrod)) { if(isFlag){ var reset = $('body').scrollTop() - halfHeight; $('body').scrollTop(reset); $("#coverBtm").css("height",'0px'); isFlag = false; } } })

特别的!
根据页面结构不一样,滚动的元素不一样,取值的时候要注意,比如页面使用到position:fixed,那么滚动条就是这个元素产生的,而不是body产生的。滚动条滚动的距离 :$('当前元素').scrollTop()

你可能感兴趣的:(钉钉内web页面安卓手机键盘遮挡输入框)