关于移动端IOS input弹起键盘时，引起高度问题

.软键盘弹起，在安卓上是缩小了内容区域的高度，软键盘将下半部分进行遮挡；ios上则是整个webview整体上移，改变了整个内容区域的scrollTop值。

**
经过筛选，最终选择使用定时器，思路如下：

点击触发input
在获取焦点（软键盘弹起）前，先将页面的scrollTop值存起来
获取焦点
判断浏览器类型,如果是ios，设置定时器，将此时内容的高度值赋值给浏览器当前滚动高度（确保完全显示）
失去光标
判断浏览器类型,若为ios,清除定时器，并设置浏览器当前滚动高度值为一开始键盘未弹起的scrollTop值

//解决第三方软键盘唤起时底部input输入框被遮挡问题var bfscrolltop = document.body.scrollTop;//获取软键盘唤起前浏览器滚动部分的高度$("input.inputframe").focus(function(){//在这里‘input.inputframe’是我的底部输入栏的输入框，当它获取焦点时触发事件interval = setInterval(function(){//设置一个计时器，时间设置与软键盘弹出所需时间相近document.body.scrollTop = document.body.scrollHeight;//获取焦点后将浏览器内所有内容高度赋给浏览器滚动部分高度},100)}).blur(function(){//设定输入框失去焦点时的事件clearInterval(interval);//清除计时器document.body.scrollTop = bfscrolltop;将软键盘唤起前的浏览器滚动部分高度重新赋给改变后的高度});

关于移动端IOS input弹起键盘时，引起高度问题相关推荐

iOS input被键盘遮挡
//解决第三方软键盘唤起时底部input输入框被遮挡问题var bfscrolltop = document.body.scrollTop;//获取软键盘唤起前浏览器滚动部分的高度$("in ...
Vue中输入框自动获取焦点-移动端ios不能唤起键盘解决办法
实现自动唤起键盘方式一(推荐) this.$nextTick(() => {this.$refs.input.focus() })方式二 setTimeOut(()=>{this.$re ...
H5-input弹起键盘遮盖输入框(Android)、键盘弹起后不恢复(IOS)
安卓机问题: 页面完成之后发现在Android上软键盘的弹起并不会像IOS一样带动页面的弹起,而是在原有位置遮盖了输入框,表现如下(有光标的input在弹起键盘时被遮住): iOS机问题在input ...
解决 H5 IOS input 聚焦时，软键盘将页面整个推上去，键盘收起页面未下移 BUG
目录问题描述解决方案问题描述近日在开发H5应用时,测试人员发现在IOS低版本中input,textArea等输入框聚焦时,软键盘弹起会将整个页面向上顶,收回键盘后,页面不会回弹恢复页面,导致页 ...
iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案
iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案参考文章: (1)iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案 (2)https://www.cn ...
iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案—scrollIntoView()
iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案-scrollIntoView() 参考文章: (1)iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案- ...
H5页面移动端IOS键盘收起焦点错位
出现场景:IOS端,在弹出层点击input时调起键盘页面会被顶上去document.body.scrollOffset大于0,收起键盘时scrollOffset不变,造成焦点错位. 注:安卓手机点击时 ...
H5 (React) 移动端监听软键盘弹起、收起
前言:H5 有时底部按钮是固定定位,当页面上面需要用到输入内容时,会弹起软键盘,然后把底部固定的按钮也弹起来了,我们希望弹起软键盘时,底部的固定定位按钮隐藏,这里就需要对移动端软键盘弹起收起进行监听. ...
vue 全局键盘_如何解决ios input框唤起软键盘不灵敏问题？
为什么移动端点击事件要加300ms延迟呢? 早在 2007 年初,苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPh ...

关于移动端IOS input弹起键盘时，引起高度问题

.软键盘弹起，在安卓上是缩小了内容区域的高度，软键盘将下半部分进行遮挡；ios上则是整个webview整体上移，改变了整个内容区域的scrollTop值。

关于移动端IOS input弹起键盘时，引起高度问题相关推荐

最新文章

热门文章

关于移动端IOS input弹起键盘时，引起高度问题

.软键盘弹起，在安卓上是缩小了内容区域的高度， 软键盘将下半部分进行遮挡；ios上则是整个webview整体上移，改变了整个内容区域的scrollTop值。

关于移动端IOS input弹起键盘时，引起高度问题相关推荐

最新文章

热门文章

.软键盘弹起，在安卓上是缩小了内容区域的高度，软键盘将下半部分进行遮挡；ios上则是整个webview整体上移，改变了整个内容区域的scrollTop值。