解决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 ...
随机推荐
- 【Python之搜索引擎】(一)概述
learning goal--search engine 1.Find datas - crawl 2.Index 3.page rank String操作 提取网络中的链接 Extracting a ...
- strace for Android
使用strace for Android跟踪系统调用过程方便后续的so文件分析 http://benno.id.au/blog/2007/11/18/android-runtime-stracehtt ...
- Element和vue框架报错提示
上面报错提示Error in render function: "TypeError:Cannot read property '$options' of undefined" 就 ...
- Android Studio 2.3.2 下载 - 百度网盘
Android Studio是一个为Android平台开发程序的集成开发环境,其包含用于构建Android应用所需的所有工具. Android Studio 2.3.2为最新的稳定版(截止到2017年 ...
- CCF201409-1相邻数对
试题编号: 201409-1 试题名称: 相邻数对 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 给定n个不同的整数,问这些数中有多少对整数,它们的值正好相差1. 输入格式 ...
- SQL Server ->> WITH RESULT SETS子句
SQL Server 2012对EXECUTE子句引入了WITH RESULT SETS选项,用于对EXECUTE语句执行的存储过程或者动态语句结果进行一个指定数据类型的转换,这样可以避免一种情况就是 ...
- 路由协议RIP、EIGRP、OSPF
前提 在网络拓扑中,我们经常多个路由连接不同子网,路由之间要转发不同子网的包,前提是路由之间要知道对方路由的存在. 因此这次我要写的是有关维护路由之间存在的协议,RIP.EIGRP和OSPF,静态路由 ...
- Routing Manager for WCF4 z
http://www.codeproject.com/Articles/77198/Routing-Manager-for-WCF Download source Contents Features ...
- 快速替换dll命名空间 z
Step1:使用ildasm将代码反编译成il中间语言. 名字存贮为你想要的名字. Step2:用记事本打开il文件全局替换命名空间. Step3:使用ilasm将il文件编译成dll 按下回车即可生 ...
- htm5 手机自适应问题 文本框被激活(获取焦点)时,页面会放大至原来尺寸。
加上这句话就ok啦 <meta name="viewport" content="width=device-width, initial-scale=1.0, mi ...