解决苹果手机(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);
  }
});

注意:************************有时会出现绑定事件不成功*****************可以这样写**************************

 <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>

猜你喜欢

转载自www.cnblogs.com/helloearth/p/11422751.html