解决苹果手机(IOS)input失焦后,页面不恢复的问题
var winHeight = $(window).height();
var u = navigator.userAgent, app = navigator.appVersion
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
var adOrIosTime = 0;
$("input").blur(function(){
clearTimeout(adOrIosTime);
if (isIOS) {
adOrIosTime = setTimeout(()=>{
if(document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA'){
return;
}
let result = 'pc';
if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
result = 'ios';
}else if(/(Android)/i.test(navigator.userAgent)) { //判断Android
result = 'android'
}
if( result = 'ios' ){
document.activeElement.scrollIntoViewIfNeeded(true);
}
},100)
}else{
adOrIosTime = setTimeout(()=>{
window.scrollTo(0, Math.max(winHeight - 1, 0));
}, 100);
}
});
注意:***********************有时因为异步操作dom, 因此上边方法初始化时绑定不了事件**************可以写成内联方法**************************
<input type='text' onblur="inputBlur();"/>
<script type="text/javascript">
var winHeight = $(window).height();
var u = navigator.userAgent, app = navigator.appVersion
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
var adOrIosTime = 0;
function inputBlur(){
clearTimeout(adOrIosTime);
if (isIOS) {
adOrIosTime = setTimeout(()=>{
if(document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA'){
return;
}
let result = 'pc';
if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
result = 'ios';
}else if(/(Android)/i.test(navigator.userAgent)) { //判断Android
result = 'android'
}
if( result = 'ios' ){
document.activeElement.scrollIntoViewIfNeeded(true);
}
},100)
}else{
adOrIosTime = setTimeout(()=>{
window.scrollTo(0, Math.max(winHeight - 1, 0));
}, 100);
}
}
</script>