好吧,其实不是顶飞,准确点说应该是h5页面fiexed定位在底部的输入框在ios软键盘弹起的时候软键盘跟输入框有时会有一段悬空的距离,无法紧贴。在安卓机子上则没有这样的情况。
解决方法是通过h5的scrollIntoView去实现。scrollIntoView()可以在所有的HTML元素上调用,在滚动浏览器窗口,或者窗口发生变化时,可以调用该方法让元素出现在视窗中。(本文的例子就是软键盘的弹出改变了窗口的高度)
该方法不传参数或者传入true可以让元素与视窗顶部齐平,如果传入false调用元素会尽可能全部出现在视口中,(可能的话,调用元素的底部会与视口顶部平齐。)

具体代码如下,用一个全局的定时器变量改变input框的状态,在input框点击或聚焦时触发该定时器,失焦则清除定时器(这里用vue事件作为例子)
template模板

<input @click="viewAll" @blur="viewDefault"  ref="replyInput" type="text"  />

javascript模块

var inputTimer = null;

viewAll: function(){
this.inputTimer = setInterval( () => {
this.$refs.replyInput.scrollIntoView(false);
},100);
},
viewDefault: function(){
clearInterval(this.inputTimer);
}
这个问题解决完呢,通常输入框弹起的时候我们会给背景加个遮罩层,同时也不想背景滑动,这时候单单给body添加overflow hidden是不够的,主要是ios的机子上无法兼容,so这时候最好还是给蒙板跟你的输入框区域加上个touchmove事件,来去掉touchmove的默认事件。如
template模板 遮罩层
<div  @touchmove="stopMove($event)" class="view-mask">
</div>

javascript模块

stopMove: function(e){
e.preventDefault();
}

解决h5底部输入框在ios被软键盘顶飞 软键盘消失还下不来的更多相关文章

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

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

  2. JS判断是IOS还是Android以及如何解决h5打包后在ios下内容与状态栏重叠问题

    h5打包后在ios下内容与状态栏重叠问题: 1:知道设备的类型: var u = navigator.userAgent, app = navigator.appVersion; var isAndr ...

  3. Android软键盘弹出,覆盖h5页面输入框问题

    之前我们在使用vue进行 h5 表单录入的过程中,遇到了Android软键盘弹出,覆盖 h5页面 输入框 问题,在此进行回顾并分享给大家: 系统:Android 条件:当输入框在可视区底部或者偏下的位 ...

  4. h5移动端常见虚拟键盘顶起底部导航栏解决办法

    在h5移动端开发中相信很多朋友跟我一样都会遇到页面底部导航被虚拟键盘顶起的问题,自己在网上找到的解决办法拿出来与大家分享,有不完美之处还望见谅,有更好的解决办法可以贴出来大家一起互相学习!! var ...

  5. 表单在ios下输入框必须重压或长按才能唤起软键盘

    解决方案: 一.在node_module里找到fastClick文件,然后找到focus方法,加一句focus方法即可解决:FastClick.prototype.focus = function(t ...

  6. 微信H5页面 会被软键盘顶起来

    问题描述:H5页面在微信中打开,input输入框获取焦点时,页面被软键盘顶上去:关闭软键盘时,页面不会自动下来(恢复初始状态) H5页面在微信中初始状态如下图: input输入框获取焦点时,页面被软键 ...

  7. h5页面在不同ios设备上的问题总结

    1.日期问题 对于yyyy-mm-dd hh:mm:ss 这种格式在ios系统不识别 时间格式化的时候,在浏览器端处理好好的,到了手机端,就变成NAN,或者null,这种情况,是ios系统不能转化这种 ...

  8. 移动端H5制作安卓和IOS的坑 持续更新...

    移动端H5制作安卓和IOS的坑 持续更新... 前言:最近参加公司的H5页面创意竞赛,又遇到不少页面在不同系统上的坑.踩坑之余,觉得很多之前遇到的知识点都忘了,索性开一篇博文,把这些坑都统一归纳起来, ...

  9. 记录移动端html界面中底部输入框触发焦点时键盘会把输入框遮挡的问题

      //浏览器当前的高度 var oHeight = $(document).height(); //监听窗口大小的时候动态改变底部输入框控制器的定位 $(window).resize(functio ...

随机推荐

  1. andriod导入v4包导致的错误

    最近升级android studio到版本3.0.1后,想要使用FragmentActivity这个类,导入v4包,发现R文件报错了,也就是找不到的意思. 如图:导包 此时选中v4包导进去. 确定之后 ...

  2. php简单的数组递归

    参照 http://www.oschina.net/code/snippet_105637_11401  的例子   $arr = array('aa' =>  array('bb' => ...

  3. selenium借助send_keys实现上传(以网易邮箱为例)

    #code:utf-8from selenium import webdriverimport time#网易163邮箱dr = webdriver.Firefox()file_path = 'htt ...

  4. TCP、UDP、Socket 通信(原)

    说明:本随笔主要演示自己给自己发送消息例子,分别使用了TCP协议.UDP协议以及socket套接字通信.使用socket套接字了模拟TCP.UDP通信实现原理.其中有些源码都来自<C#高级编程 ...

  5. Java 中的引用

    JVM 是根据可达性分析算法找出需要回收的对象,判断对象的存活状态都和引用有关. 在 JDK1.2 之前这点设计的非常简单:一个对象的状态只有引用和没被引用两种区别. 这样的划分对垃圾回收不是很友好, ...

  6. The Tao to Excellent

    1:一次只做一件事情 我不具备同时做好多件事情的能力. 2:随身携带一本书 效率最高的学习时间是那些零碎的时间. 3:听身体的 休息的标准是:如果你觉得你是在休息,那你就是在休息了. 4:如果有一件事 ...

  7. mongdb时间类型

    Date() 显示当前的时间new Date 构建一个格林尼治时间   可以看到正好和Date()相差8小时,我们是+8时区,也就是时差相差8,所以+8小时就是系统当前时间ISODate() 也是格林 ...

  8. slf4j-api-1.5.8.jar

    资源介绍: 详细说明:slf4j-api-1.5.8.jar,jsp开发中使用FCK编辑器,要用到一个jar包-slf4j-api-1.5.8.jar, jsp development using t ...

  9. MATLAB入门学习(四)

    今天我们开始学编程啦~ 点击左上角的这个进入编程界面 这是新建新的.m文件,也就是matlab命令文件, 一般命令文件不带输入和输出的参数,只是一些命令的组合,带有输入输出参数的文件是函数文件~ 下面 ...

  10. 可变长度参数以及foreach循环原理

    语法糖 接下来几篇文章要开启一个Java语法糖系列,所以首先讲讲什么是语法糖.语法糖是一种几乎每种语言或多或少都提供过的一些方便程序员开发代码的语法,它只是编译器实现的一些小把戏罢了,编译期间以特定的 ...