点击上方“前端自习课”关注,学习起来~

,0);
            }
        },

这时,我们问题得到解决了,当从输入框输入内容,然后点击键盘的完成收起键盘,效果符合我们的预期。

但是经过手机测试发现,当我们从 电话输入框 直接切换到 姓名输入框 这种操作时,页面会发生抖动。我们来继续分析。

,0);
                }, 0)
            }
        },

        inputFocus(e) {
             // 如果focus,则移除上一个输入框的timer
            if (e && e.target && e.target.tagName && e.target.tagName.toLowerCase() === 'input') {
                clearTimeout(this.timer);
            }
        }

▼原创系列推荐▼1.JavaScript 重温系列(22篇全)
2.ECMAScript 重温系列(10篇全)
3.JavaScript设计模式 重温系列(9篇全)
4.正则 / 框架 / 算法等 重温系列(16篇全)

你点的每个赞,我都认真当成了喜欢

【JS】310- 使用 focusout 事件,解决 iOS 键盘收起不归位问题的更多相关文章

  1. H5页面移动端IOS键盘收起焦点错位

    出现场景:IOS端,在弹出层点击input时调起键盘页面会被顶上去document.body.scrollOffset大于0,收起键盘时scrollOffset不变,造成焦点错位. 注:安卓手机点击时 ...

  2. IOS键盘收起后,页面底部留白处理

    环境:vue+vant 的H5页面 场景:输入框输入信息时,如登录.注册等表单信息 问题:键盘收回后页面底部留白,导致dialog组件按钮位移,视觉上,其中的按钮无法正常工作 解决方案:监听失去焦点时 ...

  3. IOS键盘收起

    1.点击Return按扭时收起键盘 - (BOOL)textFieldShouldReturn:(UITextField *)textField { return [textField resignF ...

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

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

  5. js 移动端之监听软键盘弹出收起

    js 移动端关于页面布局,如果底部有position:fixed的盒子,又有input,当软键盘弹出收起都会影响页面布局.这时候Android可以监听resize事件,代码如下,而ios没有相关事件. ...

  6. web中ios移动端软键盘收起后,页面内容留白不下滑

    微信里面打开web页面,在ios软键盘收起时,页面键盘位置的内容留白,如下图 这个问题纠结了很久,然后请教了老大(威哥),看到页面老大给出的方案就是代码改变滚动条的位置. 这里就监听键盘收起的事件,来 ...

  7. 【土旦】vue 解决ios H5底部输入框 获取焦点时弹出虚拟键盘挡住输入框 以及监听键盘收起事件

    问题描述 im聊天H5页面,在iOS系统下,inpu获取焦点弹出系统虚拟键盘时,会出现挡住input的情况,十分影响用户体验. bug图 解决方法: html: <input type=&quo ...

  8. 【转】iOS 上常用的两个功能:点击屏幕和return退出隐藏键盘和解决虚拟键盘挡住UITextField的方法

    iOS上面对键盘的处理很不人性化,所以这些功能都需要自己来实现, 首先是点击return和屏幕隐藏键盘 这个首先引用双子座的博客 http://my.oschina.net/plumsoft/blog ...

  9. 解决IOS safari在input focus弹出输入法时不支持position fixed的问题

    该文章为转载 我们在做移动web应用的时候,常常习惯于使用position:fixed把一个input框作为提问或者搜索框固定在页面底部.但在IOS的safari和webview中,对position ...

随机推荐

  1. 【阿里巴巴-高德-汽车事业部】【内推】Java技术专家、前端技术专家、C++技术专家(长期招聘)

    简历接收邮箱:yx185737@alibaba-inc.com 邮件请备注来自CSDN 一.Java技术专家 职位描述 研究汽车智能化和在线服务前沿技术,从事在线数据服务和车联网服务的设计和研发 负责 ...

  2. 扛把子组final week 1/1 Scrum立会报告+燃尽图 01

    此作业的要求参见http://edu.cnblogs.com/campus/nenu/2019fall/homework/10065 一.小组情况 队名:扛把子 组长:孙晓宇 组员:宋晓丽 梁梦瑶 韩 ...

  3. Java数组深入

    Java数组深入 内存中的数组 前边提到:数组是一种引用类型,数组引用变量只是一个引用,当它指向有效内存的时候才可以通过数组变量来访问数组元素,也就是说数组变量和数组元素在内存中是分开放的. 可以这么 ...

  4. Intellij IDEA如何设置快速调整字体大小的快捷键

    Intellij IDEA快速调整字体大小的快捷键 第一种方法(方便) 单击左上角File,找到Settings并点击.(当然也可以直接Alt+Ctrl+s) 点击Editor下的General,勾选 ...

  5. 我的第一个python web 开发框架

    1:数据库结构设计与创建 小白做好前端html设计后,马上开始进入数据库结构设计步骤. 在开始之前,小白回忆了一下老大在公司里培训时讲过的数据库设计解说: 对于初学者来说,很多拿到原型时不知道怎么设计 ...

  6. SVN常用命令详解

    命令的使用1.检出 svn co http://路径(目录或文件的全路径) [本地目录全路径] --username 用户名 --password 密码svn co svn://路径(目录或文件的全路 ...

  7. DNS资源记录的七类

    在Microsoft产品系列中,ADDS是一个很出色的设计平台,说到AD,那么我们就不得不提起他的合作伙伴--DNS,相信大家都知道,DNS在AD中的重要地位,就如男人和女人一样,要想有所作为,他们2 ...

  8. Error : Program type already present: android.support.design.widget.CoordinatorLayout$

    背景 因为公司一个app项目需要扩展,因为功能较多且较完整的流程与业务,而且和以前的业务关系不大,所以我整合到了 另外一个分包中(代号:newFunc,请注意是代号)进行依赖. 当我写完这部分业务开始 ...

  9. sql server建库建表(数据库和数据表的常用操作)

    数据库和数据表 (开发常用 操作) 一,数据库的创建 一个SQLServer 是由两个文件组成的:数据文件(mdf) 和日志文件(ldf),所以我们创建数据库就是要为其指定数据库名.数据文件和日志文件 ...

  10. python check excel 文件

    Use pip install openpyxl first Every simple example import openpyxl # 打开excel文件,获取工作簿对象 wb = openpyx ...