解决h5底部输入框在ios被软键盘顶飞 软键盘消失还下不来
好吧,其实不是顶飞,准确点说应该是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);
}
template模板 遮罩层
<div @touchmove="stopMove($event)" class="view-mask">
</div>
javascript模块
stopMove: function(e){
e.preventDefault();
}
解决h5底部输入框在ios被软键盘顶飞 软键盘消失还下不来的更多相关文章
- 【土旦】vue 解决ios H5底部输入框 获取焦点时弹出虚拟键盘挡住输入框 以及监听键盘收起事件
问题描述 im聊天H5页面,在iOS系统下,inpu获取焦点弹出系统虚拟键盘时,会出现挡住input的情况,十分影响用户体验. bug图 解决方法: html: <input type=&quo ...
- JS判断是IOS还是Android以及如何解决h5打包后在ios下内容与状态栏重叠问题
h5打包后在ios下内容与状态栏重叠问题: 1:知道设备的类型: var u = navigator.userAgent, app = navigator.appVersion; var isAndr ...
- Android软键盘弹出,覆盖h5页面输入框问题
之前我们在使用vue进行 h5 表单录入的过程中,遇到了Android软键盘弹出,覆盖 h5页面 输入框 问题,在此进行回顾并分享给大家: 系统:Android 条件:当输入框在可视区底部或者偏下的位 ...
- h5移动端常见虚拟键盘顶起底部导航栏解决办法
在h5移动端开发中相信很多朋友跟我一样都会遇到页面底部导航被虚拟键盘顶起的问题,自己在网上找到的解决办法拿出来与大家分享,有不完美之处还望见谅,有更好的解决办法可以贴出来大家一起互相学习!! var ...
- 表单在ios下输入框必须重压或长按才能唤起软键盘
解决方案: 一.在node_module里找到fastClick文件,然后找到focus方法,加一句focus方法即可解决:FastClick.prototype.focus = function(t ...
- 微信H5页面 会被软键盘顶起来
问题描述:H5页面在微信中打开,input输入框获取焦点时,页面被软键盘顶上去:关闭软键盘时,页面不会自动下来(恢复初始状态) H5页面在微信中初始状态如下图: input输入框获取焦点时,页面被软键 ...
- h5页面在不同ios设备上的问题总结
1.日期问题 对于yyyy-mm-dd hh:mm:ss 这种格式在ios系统不识别 时间格式化的时候,在浏览器端处理好好的,到了手机端,就变成NAN,或者null,这种情况,是ios系统不能转化这种 ...
- 移动端H5制作安卓和IOS的坑 持续更新...
移动端H5制作安卓和IOS的坑 持续更新... 前言:最近参加公司的H5页面创意竞赛,又遇到不少页面在不同系统上的坑.踩坑之余,觉得很多之前遇到的知识点都忘了,索性开一篇博文,把这些坑都统一归纳起来, ...
- 记录移动端html界面中底部输入框触发焦点时键盘会把输入框遮挡的问题
//浏览器当前的高度 var oHeight = $(document).height(); //监听窗口大小的时候动态改变底部输入框控制器的定位 $(window).resize(functio ...
随机推荐
- 如何编译 opencv3 和 opencv_contrib(Linux)
本文以编译并安装OpenCV 3.3.0 为例,安装系统为 Linux x64 (Fedora 21),具体步骤如下: 1. 下载 Source code zip 压缩包 从下面网址,选择 openc ...
- Docker_3 数据卷
数据卷 数据卷容器 参考连接 在Docker容器管理数据有两种方式 数据卷(Data Volumes) 数据卷容器(Data Volume Containers) 数据卷 这种方式在创建容器的时候将本 ...
- window 服务注册、卸载
1.以管理员身份打开 命令窗口 2.服务注册命令:sc create myServer binpath= path 3.服务卸载命令:sc delete myServer Topshelf 服务安装 ...
- Shell,Bash,等脚本学习(有区别)
二元比较操作符,比较变量或者比较数字.注意数字与字符串的区别. 整数比较 -eq 等于,如:if [ "$a" -eq "$b" ] -n ...
- django 外键操作
下面定义两个模型,一个主表,一个字表. 举例说明: 如何通过主表对象找到对应的子表对象? 如何通过子表对象找到对应的主表对象? class Person(models.Model); name = m ...
- 八.安装Nginx
http://blog.csdn.net/grhlove123/article/details/47834673
- poj 1159 Palindrome 【LCS】
任意门:http://poj.org/problem?id=1159 解题思路: LCS + 滚动数组 AC code: #include <cstdio> #include <io ...
- .net mvc 路由
Asp.net Mvc之Action如何传多个参数 在Global.asax文件中,默认路由如下. routes.MapRoute( "Default", // 路由名称 &quo ...
- halcon 分水领域法详解(转载)
寻思自己写了的,但是这个大佬写的太好了,感谢Y忍冬草_ http://blog.csdn.net/y363703390 https://blog.csdn.net/y363703390/article ...
- 利用Apache Isis快速原型化-宠物诊所的宠物管理
前言 Apache Isis是DDD方法的一个实现框架. 需求分析 宠物诊所需要记录宠物的资料,包括类型.名字.及其主人. 多个宠物可能同属于一个主人. 宠物可能更换主人. 宠物主人记录姓名,我们可以 ...