美文网首页
表单页在安卓和ios上出现的兼容性问题

表单页在安卓和ios上出现的兼容性问题

作者: 八妹sss | 来源:发表于2019-05-27 10:15 被阅读0次
问题:

MAKA页面转成h5,表单页在安卓和ios上出现的兼容性问题(ios和安卓手机软键盘收起,页面被顶上去)

解决:

  var isIOS = navigator.userAgent.indexOf('Android') === -1 ? true : false;
  var el = $('.maka-page-7 .maka-eleCanvas-7 .big-editor-new-form .animated');
  if (isIOS) {
    inputBlur(el);
  } else {
    keyboardTuckedAway();
  }

// 解决安卓手机兼容性问题
  function keyboardTuckedAway () {
   var eleTop = Number($('.maka-eleCanvas.maka-eleCanvas-7').css('top').split('px')[0]); // 获取高度
   var win_h = $(window).height();//关键代码
   window.addEventListener('resize', function () {// 监听到软键盘收起就让元素回到原来的位置(1.失焦 2.软键盘的收起按钮)
     if($(window).height() >= win_h){
      var timer =  setTimeout(() => {
        $('.maka-eleCanvas.maka-eleCanvas-7').offset({'top': eleTop});// 设置高度
          clearTimeout(timer);
        }, 100);
      }
    });
  }
  // 解决ios手机的兼容性问题
  function inputBlur(el) {
    $(el).find('input').on('blur', function () {
      window.scrollTo(0, 0);
    });
  }

相关文章

网友评论

      本文标题:表单页在安卓和ios上出现的兼容性问题

      本文链接:https://www.haomeiwen.com/subject/bylctctx.html