苹果系统H5页面软键盘弹出造成点击事件失效
问题描述:苹果系统,软键盘弹出,键盘再收起时,原虚拟键盘位点击事件无效。
排查过程:只有iphonex、iphone6,ihpone7等部分机型会出现该问题;
原因:在IOS下,点击页面中的input时,弹出软键盘时,如果input比较靠下,整个页面会上移,document.body.scrollOffset会由0变成大于0。 软键盘消失后,页面会下移。但是document.body.scrollOffset并不会变成0,所以这时候触控不准;
$('textarea,input').on('blur', function (event) {
document.body.scrollTop = 0;
});
或者<br>$("input").blur(function() {
console.log("失去焦点");
window.scrollTo(0, 0);
});
==新的处理办法
//ios 软键盘处理,页面错位恢复问题
var isReset = true;
var u = navigator.userAgent;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
function scrollTO() {
//软键盘收起的事件处理
isReset = true;
setTimeout(function () {
//当焦点在弹出层的输入框之间切换时先不归位
if (isReset) {
window.scrollTo(0, 0);//失焦后强制让页面归位
}
}, 300);
}
if (isiOS) {//ios
document.body.addEventListener('focusin', function () {
//软键盘弹出的事件处理
isReset = false;
});
document.body.addEventListener('focusout', scrollTO);
}
document.body.removeEventListener('focusout', scrollTO);