解决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 ...
随机推荐
- 初看Mybatis 源码 (三) SQL是怎么执行的
前面说到Java动态代理,Mybatis通过这种方式实现了我们通过getMapper方式得到的Dao接口,可以直接通过接口的没有实现的方法来执行sql. AuthUserDao mapper = se ...
- compositionstart事件与compositionend事件
https://blog.csdn.net/u013096088/article/details/52873562
- ASP.NET Core - 中间件与管道(1)
今天来讨论一个ASP.NET Core 很重要概念管道和中间件,在ASP.NET Core中,针对HTTP请求采用pipeline也就是通常说的管道方式来处理,而管道容器内可以挂载很多中间件(处理逻辑 ...
- 一些SAP Partners能够通过二次开发实现打通C/4HANA和S/4HANA的方法介绍
有好几位朋友在公众号后台给我留言询问SAP C/4HANA和S/4HANA集成的方案. 尽管我给这些朋友推送了一个方案:打通C/4HANA和S/4HANA的一个原型开发:智能服务创新案例,然而我得到的 ...
- QuantLib金融库的简易安装
最近在弄毕设,研究关于固定收益债券定价方面的知识,需要使用到QuantLib这个Python金融库,但是这是一个C++编译的库,官网也只给出了源代码,安装起来十分繁琐,所以在网上找了一个简易的安装方法 ...
- linux解压eclipse启动时无法找到jre环境的解决办法
使用软链接的方法: 1.打开终端进入到eclipse安装主目录下:mkdir jre 2.cd jre 3.ln -s /home/zhoushuo/app/jdk1.8.0_102/bin bin
- Cow Relays 【优先队列优化的BFS】USACO 2001 Open
Cow Relays Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Tota ...
- Jupyter Notebook 设置黑色背景主题、字体大小、代码自动补全
1.背景主题.字体大小设置 安装Jupyter主题: pip install jupyterthemes 然后,更新Jupyter主题: pip install --upgrade jupyterth ...
- MyBatis动态sql语句归纳
1.删除数据(假删除)并修改时间 <!--根据id删除学生信息(多条)--> <update id="updateStuStatus" parameterType ...
- mybatis实现最简单的增删改查
1.数据库设计 2.项目结构(针对User不用管Blogger) User.java package com.yunqing.mybatis.bean; public class User { pri ...