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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zgggzj.html