html 软键盘 遮罩层,移动端 由于软键盘导致页面布局错乱的解决方案

变量声明 player_id_name(弹出软键盘的input标签、id标签)

iframe-cz(遮罩层元素里的弹窗div、class标签)

----------------------------------------------------

var html = document.getElementsByTagName('html')[0];

html.style.height = html.clientHeight + 'px';

var input = document.getElementById('player_id_name'), timer;

input.addEventListener('focus', function(e) {

timer = setInterval(() => {

input.scrollIntoView(false);

}, 200)

}, false)

input.addEventListener('blur', function(e) {

clearInterval(timer);

timer = null;

}, false)

-----------------------------------------------------

如果是遮罩层弹窗里面出现软键盘的情况 那么需要加上

$("#player_id_name").bind('focus', function () {

$('.iframe-cz').css('position', 'absolute');

})

$("#player_id_name").bind('blur', function () {

$('.iframe-cz').css({ 'position': 'fixed', 'bottom': '0' });

})