好吧,其实不是顶飞,准确点说应该是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. Eclipse 无法编译,提示“错误: 找不到或无法加载主类”

    jar包问题: 1.项目的Java Build Path中的Libraries中有个jar包的Source attachment指为了一个不可用的jar包, 解决办法是:将这个不可用的jar包remo ...

  2. 初级游戏外挂编程详解 windows运行原理+游戏辅助编程 游戏外挂编程

    详解游戏辅助编程 [目录] 1-什么是Windows API 2-Windows进程 3-Windows 的内存的运行原理 4-windows 中句柄的概念 5-Windows的变量类型 6-辅助实现 ...

  3. 【Leetcode】【Medium】Best Time to Buy and Sell Stock II

    Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...

  4. Mysql学习---SQL测试题之表结构

    创建表结果和数据准备[直接执行即可] /* Navicat MySQL Data Transfer Source Server : ftl1012 Source Server Version : 50 ...

  5. 全文检索之solr学习

    solr下载: http://www.apache.org/dyn/closer.lua/lucene/solr/7.3.1 学习教程 除了官网的教程,一切教程都是可以有错误的. https://lu ...

  6. BZOJ3196:二逼平衡树(线段树套Splay)

    Description 您需要写一种数据结构(可参考题目标题),来维护一个有序数列,其中需要提供以下操作: 1.查询k在区间内的排名 2.查询区间内排名为k的值 3.修改某一位值上的数值 4.查询k在 ...

  7. 理解JavaScript闭包(closure)

    闭包听了很多次了,可是到底有那些具体的用法还是不清楚,看了<JavaScript高级程序设计>,有点明白了. 1.闭包的定义: 闭包其实就是一个函数,而这个函数有点特别,它能够访问另一个函 ...

  8. 二. Python WebDriver环境搭建

    1. 安装Selenium 在命令行中输入: 显示安装成功: 2. 测试例子 打开百度页面并在输入框输入搜索内容(默认为firework) # 1. Selenium默认为Firefox.验证 fro ...

  9. iOS之3DTouch的使用---很简单,看我就够啦~~

    3DTouch是苹果在iOS9之后新推出的功能,功能大致可以分成两种,一种是长按app的icon,会出现以下的界面,还有一种是在app内部的某个视图上使用,效果如下图. 详细的效果也可以参见微信.微信 ...

  10. Spring MVC 使用tomcat中配置的数据源

    Spring MVC 使用tomcat中配置的数据源 配置tomcat数据源 打开tomcat目录下的conf目录,编辑sever.xml目录.在<GlobalNamingResources&g ...