问题:
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);
});
}