移动端h5唤起键盘_移动端H5监听键盘弹出和收起

const isIOS= /iphone|ipad|ipod/.test(ua);

const isAndroid= /android/.test(ua);if(isIOS) {

let isReset= true; //是否归位

this.focusinHandler = () =>{

isReset= false; //聚焦时键盘弹出，焦点在输入框之间切换时，会先触发上一个输入框的失焦事件，再触发下一个输入框的聚焦事件

focusInput();

};this.focusoutHandler = () =>{

isReset= true;

setTimeout(()=>{//当焦点在弹出层的输入框之间切换时先不归位

if(isReset) {

window.scroll(0, 0); //确定延时后没有聚焦下一元素，是由收起键盘引起的失焦，则强制让页面归位

blurInput();

}

},30);

};

document.body.addEventListener(‘focusin‘, this.focusinHandler);

document.body.addEventListener(‘focusout‘, this.focusoutHandler);

}if(isAndroid) {

const originHeight= document.documentElement.clientHeight ||document.body.clientHeight;this.resizeHandler = () =>{

const resizeHeight= document.documentElement.clientHeight ||document.body.clientHeight;

const activeElement=document.activeElement;if (resizeHeight

if (activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA")) {

setTimeout(()=>{

activeElement.scrollIntoView({ block:‘center‘ });//焦点元素滚到可视区域的问题

}, 0)

focusInput();

}

}else{//键盘收起后逻辑

blurInput();

$(".input").blur();

}

};

window.addEventListener(‘resize‘, this.resizeHandler);

}functionfocusInput() {var $zi1 = $("header .zi1");var $zi2 = $("header .zi2");var $img = $("header img");

$zi1.animate({"top":"-28px"},200);

$zi2.fadeIn(200);

$img.animate({"height":"0"},200);

}functionblurInput() {var $zi1 = $("header .zi1");var $zi2 = $("header .zi2");var $img = $("header img");

$zi1.show().animate({"top":"0"},200);

$zi2.fadeOut(200);

$img.animate({"height":"130px"},200);

}functionshowPW(target) {var $target =$(target);var $icon = $target.children("i");var $input = $("#pwInput");var $input2 = $("#pwInput2");if ($icon.hasClass("icon-eye4")) {

$icon.attr("class", "iconfont icon-eye5");

$input.hide();

$input2.show();

}else{

$icon.attr("class","iconfont icon-eye4");

$input.show();

$input2.hide();

}

}