解决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);
}

这个问题解决完呢，通常输入框弹起的时候我们会给背景加个遮罩层，同时也不想背景滑动，这时候单单给body添加overflow hidden是不够的，主要是ios的机子上无法兼容，so这时候最好还是给蒙板跟你的输入框区域加上个touchmove事件，来去掉touchmove的默认事件。如
template模板遮罩层

<div  @touchmove="stopMove($event)" class="view-mask">
</div>

javascript模块

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

转载于:https://www.cnblogs.com/wangfugui/p/10155976.html

解决h5底部输入框在ios被软键盘顶飞软键盘消失还下不来相关推荐

【土旦】vue 解决ios H5底部输入框获取焦点时弹出虚拟键盘挡住输入框以及监听键盘收起事件...
问题描述 im聊天H5页面,在iOS系统下,inpu获取焦点弹出系统虚拟键盘时,会出现挡住input的情况,十分影响用户体验. bug图解决方法: html: <input type=&quo ...
h5底部输入框被键盘遮挡_总结几个移动端H5软键盘的大坑【实践】
转载链接:https://segmentfault.com/a/1190000022115177 1.部分机型软键盘弹起挡住原来的视图解决方法:可以通过监听移动端软键盘弹起 Element.scro ...
h5底部输入框被键盘遮挡_移动端虚拟键盘引发的问题分析
在工作的过程中无论是与原生结合的Hybird的H5页面或者微信公众号页面都会遇到当触发键盘输入行为时,页面窗口往上离开屏幕(与iOS的适配)或者页面高度变小(在微信中打开页面等),现在我们来分析一下各 ...
h5底部输入框被键盘遮挡_H5 键盘兼容性小结
" 我们经常需要填写表单,键盘的行为存在各种差异." 在 H5 项目中,我们会经常遇到页面中存在单个甚至多个 input/textarea 输入框与底部固定元素的布局情况.在 in ...
iOS开发之iOS15及以上长按输入框点击文本识别，但识别界面不只是键盘区域，而是全屏的，并且会把键盘顶飞的bug解决
正常情况下的实况文本,以微信举例,找一个输入框,长按会出现下图按钮(粘贴右边的), 点击这个按钮键盘会变成后置摄像头的内容,如下图但不正常的情况是扫描页面会占满整个屏幕如下图识别完之后,键盘显示异 ...
解决Android软键盘弹出覆盖h5页面输入框问题 // 在ios系统中输入框软键盘消失后，页面不回弹的问题 // 解决苹果不回弹页面 // 微信环境打开
//解决Android软键盘弹出覆盖h5页面输入框问题 window.addEventListener('resize', () => {if (document.activeElement.t ...
解决 H5 IOS input 聚焦时，软键盘将页面整个推上去，键盘收起页面未下移 BUG
目录问题描述解决方案问题描述近日在开发H5应用时,测试人员发现在IOS低版本中input,textArea等输入框聚焦时,软键盘弹起会将整个页面向上顶,收回键盘后,页面不会回弹恢复页面,导致页 ...
Android 监听软键盘的高度并解决其覆盖输入框的问题
1.前言在某些项目中,我们常常需要自定义一个输入框,软键盘弹出时就把输入框顶上去,关闭时输入框再回到原位(比如下方的效果图,实际上各种 App 中的聊天界面和发布评论的界面大体都是这样).在这个过程 ...
Taro小程序，底部输入框获取键盘高度动态设置bottom有延迟解决
Taro小程序,底部输入框获取键盘高度动态设置bottom有延迟0.5s左右业务场景: Taro+TaroUI+微信小程序底部固定了一个输入框,当聚焦时输入框自然要上推页面才合理.但不能设置adj ...

解决h5底部输入框在ios被软键盘顶飞软键盘消失还下不来

解决h5底部输入框在ios被软键盘顶飞软键盘消失还下不来相关推荐

最新文章

热门文章

解决h5底部输入框在ios被软键盘顶飞 软键盘消失还下不来

解决h5底部输入框在ios被软键盘顶飞 软键盘消失还下不来相关推荐

最新文章

热门文章

解决h5底部输入框在ios被软键盘顶飞软键盘消失还下不来

解决h5底部输入框在ios被软键盘顶飞软键盘消失还下不来相关推荐