微信浏览器input关闭键盘后导致页面底部空缺问题

移动端页面中有一个input框，点击时弹出软键盘，关闭时页面底部空白出一部分，然后滑动一下又恢复原状了。

解决方案：绑定一个blur事件，当其触发时，使scrollTo为0

<input type="text" v-model="teamCodeValue" @blur="inputBlur">

    //对应的methods中添加jsinputBlur () {window.scrollTo(0, 0)},

假如你用的是UI组件，可以在mounted,写监听事件：

mounted(){document.getElementsByTagName('input')[3].addEventListener('blur', this.inputBlur)document.getElementsByTagName('input')[4].addEventListener('blur', this.inputBlur)document.getElementsByTagName('textarea')[0].addEventListener('blur', this.textareaBlur)}

如果是很多，那么可以直接获取所有

let inputs = document.getElementsByTagName('input')
for (var i = 0; i < inputs.length; i++) {inputs[i].addEventListener('blur', this.inputBlur)
}

微信浏览器input关闭键盘后导致页面底部空缺问题相关推荐

IOS唤起键盘后--导致页面底部空白问题
场景: 在写微信项目的时候, 经常会遇到一些表单项.对于移动端项目,input(输入框)聚焦时,都会唤起设备键盘,内容输入完成,点击 "完成" 按钮,设备键盘消失,页面正常显示. ...
IOS微信浏览器input输入账号键盘闪烁
在开发H5应用的时候去适配微信浏览器, 发现当ios端在文本输入时,会引发键盘的反复闪烁,输入密码时则不会相反在安卓端表现良好因为浏览器的重绘行为确实头疼,一开始采用的是给input设置 auto ...
微信设置字体变大后导致页面样式布局全乱
转载: 微信放大字体导致页面样式布局全乱 - 男孩亮亮 - 博客园微信webview内置了调整字体大小的功能,用户可以根据实际情况进行调节.但是这也会导致字体大小改变以后,出现页面布局错乱的情况. 1 ...
在微信浏览器字体被调大导致页面错乱的解决办法
iOS的解决方案是覆盖掉微信的样式: body { /* IOS禁止微信调整字体大小 */-webkit-text-size-adjust: 100% !important; } 安卓的解决方案是通过 ...
微信浏览器iframe嵌套h5，h5页面不能调起微信支付问题处理
微信浏览器iframe嵌套h5,h5页面不能调起微信支付问题处理第一步: 微信公众号配置网页授权域名,拿用户openid 第二步: h5页面跳转后端微信静默授权,拿到用户的openid 第三步: 微 ...
微信浏览器中IOS12键盘回弹的问题
最近在开发微信公众号项目的过程中,遇到了一个这样的问题.在IOS12中微信浏览器在键盘回弹时,导致页面展示的DOM与真实的DOM存在错位,即当键盘回弹时,点击界面上面的按钮无反应,点击其他输入框也无法 ...
手机软键盘弹起导致页面变形的一种解决方案
最近用 uniapp(一种第三方 app 开发框架) 开发 app,其中一个页面有十几个 input 输入框,在点击 input 输入时,软键盘弹起,导致页面往上顶,底部的按钮也全部弹到页面上面去了, ...
html 微信无法获取图片,微信浏览器input file 图片选择问题，获取不到图片的type等信息...
求教一下各位大神,在微信公众号页面出现的问题,通过点击获取一张图片用于上传时,从'图库'里面获取的图片各个参数(file.type,file.name等)都正常,file.type为image/png ...
关于微信浏览器调整字体大小，H5页面适配问题
最近开发公众号遇到一个问题: 1.ios,Android 加载页面,如果用户调整了微信自带的字体大小,那么我们的页面就会跟随调整字体大小,导致页面错乱无法适配. 找寻了一些方法总结如下: 1.ios ...

微信浏览器input关闭键盘后导致页面底部空缺问题

微信浏览器input关闭键盘后导致页面底部空缺问题相关推荐

最新文章

热门文章