解決蘋果手機(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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM