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>

解决苹果手机(IOS)input失焦后,页面不恢复的问题的更多相关文章

  1. fastclick使用与 fastclick ios11.3相关bug原因(ios输入框点击变得不灵敏,ios input失焦后,页面上移,点击不了)

    FastClick 移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击.为了能够立即响应用户的点击事件,就有了FastClick. 安装fastc ...

  2. 兼容h5在ios上登录窗口input失焦后页面不会滚

    $("#logincode").blur(function(){ //滚动到顶部 window.scrollTo(0, 0); })一般多用于密码框失焦后,页面不回滚

  3. [BUG]微信浏览器 iOS input 失焦页面不回弹

    描述 ios13. ios中,input唤醒软键盘后,body整体会向上滚动,如果input框输入完成确定后,如果页面在最底部则不回弹,导致fixed布局实际效果上移,fixed布局内按钮点不到. 如 ...

  4. iOS推送后页面跳转

    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launc ...

  5. 移动端登录页面input获取焦点后页面布局及输入框上移的问题

    最近切微信页面的时候,发现移动端的登录页面,带输入框的那种,如图: 从页面本身来看没有什么问题,上传至测试服务器,用iphone访问也没有什么问题,但是当同事用Android手机获取焦点后,问题来了, ...

  6. 解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端)

    前言:微信H5项目,ios端出现了软键盘输完隐藏后页面不会回弹,下方会有一大块留白 最近微信和ios都有版本升级,不知道是哪边升级造成的,但是经过测试,软键盘收起后,再滚动一下页面,下面的留白就会消失 ...

  7. ios键盘弹起 body的高度拉长,页面底部空白问题。ios软键盘将页面抵到上面后,关闭软键盘页面不回弹的问题。

    js 监听ios手机键盘弹起和收起的事件 /* js 监听ios手机键盘弹起和收起的事件 */ document.body.addEventListener('focusin', () => { ...

  8. bootsrtap h5 移动版页面 在苹果手机ios滑动上下拉动滚动卡顿问题解决方法

    bootsrtap h5 移动版页面 在苹果手机ios滑动上下拉动滚动卡顿问题解决方法 bootsrtap框架做的h5页面,在android手机下没有卡顿问题,在苹果手机就一直存在这问题,开始毫无头绪 ...

  9. input输入框失去焦点,软键盘关闭后,滚动的页面无法恢复到原来位置

    H5微信页面开发,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,导致弹框里的按钮响应区域错位. 解决方案:给输入框(或select选择框)添加失去焦点的 ...

随机推荐

  1. MySQL命令行脚本

    1. 命令行连接 打开终端,运行命令 mysql -uroot -p 回车后输入密码,当前设置的密码为mysql 退出登录 quit 和 exit 或 ctrl+d 查看版本:select versi ...

  2. MySQL删除语句比较,清空表数据,重置自增长索引

    drop truncate delete 程度从强到弱 1.drop table tbdrop将表格直接删除,没有办法找回 2.truncate (table) tbtruncate 删除表中的所有数 ...

  3. 69-for和if的嵌套使用

    #include <stdio.h> int main (void) { int i; ; ; i<=; ++i) { == )//%3==0 这个意思是i除以3,余数是0!说普通点 ...

  4. [C++]蛇形填数

    [从左下角开始,逆时针蛇形填数] #include <iostream> using namespace std; int main() { int n; cin>>n; in ...

  5. 排序算法之归并排序的python实现

    采用分治法: 分割:递归地把当前序列平均分割成两半. 集成:在保持元素顺序的同时将上一步得到的子序列集成到一起(归并). 归并操作(归并算法),指的是将两个已经排序的序列合并成一个序列的操作.归并排序 ...

  6. Flask 学习之flask入门

    一.Flask的简单介绍 Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架,对于Werkzeug本质是Socket服务端,其用于接收http请 ...

  7. 解决maven项目java中配置文件打包被忽略

    pom.xml中添加以下配置 <build> <!--配置打包时不过滤非java文件开始 --> <!--说明,在进行模块化开发打jar包时,maven会将非java文件 ...

  8. TD tree体验

    在体验了学长们设计的app后,我颇有感触,我们也可以凭借自己的力量来开发一款软件,虽然它可能并不如市面上相同类型的那么完美,但它对我们的意义却是不一样的. 我是在下午的见面会上看到的这款软件,接待的学 ...

  9. 《实战Java高并发程序设计》读书笔记五

    第五章 并行模式与算法 1.单例模式 是一种对象创建模式,用于产生一个对象的具体实例,它可以确保系统一个类只产生一个实例. 对于频繁创建使用的对象可以省略new 操作花费的时间,可以减少系统开销. 由 ...

  10. 【JavaWeb】Spring入门——HelloWorld

    0.为什么要使用Spring https://www.cnblogs.com/zmmi/p/7922186.html 1. 下载jar包 https://blog.csdn.net/qq_435401 ...