软键盘收放事件

这周几天遇到了好几个关于web移动端兼容性的问题。并花了很长时间去研究如何处理这几种兼容问题。

这次我们来说说关于移动端软键盘的js处理吧。

一般情况下,前端是无法监控软键盘到底是弹出来还是关闭的。能使用的一般是输入框获取焦点事件(focus)与输入框失去焦点事件(blur)。

ios设备下,点击输入框,输入框获取了焦点,便会弹出软键盘;软键盘关闭后,输入框也能失去焦点。这点在ios下是没什么问题的。也可通过此方法来处理键盘相关问题。

但在安卓设备下,点击输入框,输入框获取了焦点,弹出软键盘没问题,但是我们关闭软件盘时,其实输入框的焦点并不会失去。因此,此方法不适合安卓。因此要使用resize。

一句话:ios使用focus、blur处理全部软键盘事件,安卓部分可处理,但可加上window的resize事件监听软键盘的打开与关闭。

点击输入框后的处理:

点击其他节点或ios关闭软键盘的处理:

安卓下,这样就能判断软键盘的收放状态了。

而ios软键盘收放不会触发resize方法,说明,ios软键盘弹出不会改变页面的高度,安卓可以。因此能解决。

软键盘问题后续加入~~

【移动端web】软键盘兼容问题的更多相关文章

  1. H5软键盘兼容方案

    前言 最近一段时间在做 H5 聊天项目,踩过其中一大坑:输入框获取焦点,软键盘弹起,要求输入框吸附(或顶)在输入法框上.需求很明确,看似很简单,其实不然.从实验过一些机型上看,发现主要存在以下问题: ...

  2. 可能这些是你想要的H5软键盘兼容方案

    前言 最近一段时间在做 H5 聊天项目,踩过其中一大坑:输入框获取焦点,软键盘弹起,要求输入框吸附(或顶)在输入法框上.需求很明确,看似很简单,其实不然.从实验过一些机型上看,发现主要存在以下问题: ...

  3. 前端angularJS利用directive实现移动端自定义软键盘的方法

    最近公司项目的需求上要求我们iPad项目上一些需要输入数字的地方用我们自定义的软键盘而不是移动端设备自带的键盘,刚接到需求有点懵,因为之前没有做过,后来理了一下思路发现这东西也就那样.先看一下实现之后 ...

  4. 总结几个移动端H5软键盘的大坑

    1.部分机型软键盘弹起挡住原来的视图 解决方法:可以通过监听移动端软键盘弹起 Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内.参数如下. true,表示 ...

  5. 移动端定制软键盘样式 配置input属性的type属性

    1.当你的input输入的数据为链接地址时type属性可改为 type=url 最下面一栏就会出现.com 提高用户体验 2.当你的input输入的数据为email时type属性可改为 type=em ...

  6. 移动端Android软键盘遮住输入框解决!

    在使用vue的情况下,在输入框中添加 <textarea class="textarea" @click="isAndroid" :maxlength=& ...

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

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

  8. form表单提交和ajax表单提交,关于移动端如何通过软键盘上的【搜索】和【前进】进行提交操作

    [文章来源]由于自己对于form研究甚少,所以一直用的都是AJAX进行提交,这次后台提出要用form提交,顺便深入研究一下:之前在做表单的时候,发现input可以通过设置不同的type属性,调用不同的 ...

  9. JS移动端如何监听软键盘回车事件

    移动端经常项目中会有搜索之类的功能,一般实现的是按搜索按钮进行搜索,如果要像PC端一样实现按回车键进行搜索该怎么实现呢? 方法很简单,就是在搜索框的input外面套一个form标签  注意点:form ...

随机推荐

  1. jquery.js

    /*! jQuery v1.10.2 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license //@ sourceMappingUR ...

  2. Ocelot中文文档-跟踪

    Ocelot使用一个杰出的项目Butterfly 提供了跟踪功能. 为了使用跟踪,请阅读Butterfly的文档. 在Ocelot中如果你想跟踪一个ReRoute,你需要做如下事情: 在Configu ...

  3. android解析xml文件方法之一-----DOM

    Hello.xml文件 <dict num="219" id="219" name="219"> <key>hell ...

  4. java之jsp实现动态网页

    动态页面,说白了,就是根据一定的信息(条件)去改变呈现给用户的内容. 而这里所提到的一定的信息,通常就是指,在一个表单中用户所输入的信息. 先来看一个我们常见的用户登录界面吧. 在这里我们可以看到一共 ...

  5. 4sumii

    problem description: there is four number list named A,B,C,D; now you should out put the num of  tup ...

  6. Bootstrap在线引用css和js

    百度在线调用 <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></ ...

  7. 提高Maven下载jar包的速度

    1.提高Maven下载jar包的速度 打开项目所配置的maven包下conf目录下的settings.xml 找到  <mirrors>标签添加一下内容: 1 <!-- 阿里云仓库 ...

  8. ubuntu 16.04安装smatrgitHG工具

    SmartGit/HG 是一款开放源代码的.跨平台的.支持 Git 和 Mercurial 的 SVN 图形客户端,可运行在Windows.Linux 和 MAC OS X 系统上. 1.安装 Ubu ...

  9. XShell上传文件到Linux服务器上

    在学习Linux过程中,我们常常需要将本地文件上传到Linux主机上,这里简单记录下使用Xsheel工具进行文件传输 1:首先连接上一台Linux主机 2:输入rz命令,看是否已经安装了lrzsz,如 ...

  10. 基于.net的爬虫应用-DotnetSpider

    最近应朋友的邀请,帮忙做了个简单的爬虫程序,要求不高,主要是方便对不同网站的爬取进行扩展,获取到想要的数据信息即可.当然,基于数据的后期分析功能是后话,以后的随笔我会逐步的介绍. 开源的爬虫框架比较多 ...