解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
2018-08-25 10:07
1571 查看
在用vue-cli脚手架搭建手机H5页面应用的时候,其中一页中部有input,底部有position:absolute;bottom:0的元素,
当点击input框时在安卓手机上出现了:
1 虚拟键盘弹出盖住input
2 底部定位的元素被挤上来
网络上很多关于body设定宽高以及scrolltop的方法都不管用,因为这里是路由页面,根据网上的思路,吊起输入键盘的时候页面的高度是变化的,监听window.onresize,判断是否吊起键盘,然后设定底部模块的隐藏和显示,整个块元素的margintop就可以实现了。
代码如下
mounted () { this.clientHeight = document.documentElement.clientHeight; const that = this; // 安卓手机键盘吊起挡住输入框 window.onresize = function() { if(document.documentElement.clientHeight < that.clientHeight) { // scrollVal为负值 let scrollVal = document.documentElement.clientHeight-that.clientHeight; $(".alert-main").css("marginTop",scrollVal); $(".bottom-create").hide(); }else { $(".alert-main").css("marginTop",0); $(".bottom-create").show(); } }; },
今天这个bug 遇到了新问题,同样的华为手机上,当从别的路由吊起输入键盘的时候回到当前路由,
document.documentElement.clientHeight 就变成了减去输入键盘高度的值,
这时需要在页面第一次加载将document.documentElement.clientHeight记录到store中,store中的值不会因为页面重新渲染而改变。
以上这篇解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 移动H5页面,Android手机下,input获取焦点弹出系统虚拟键盘时,挡住input解决方法
- 苹果手机点击输入框input 页面放大 超出屏幕问题
- css的position在不同手机系统的兼容问题(点击input标签弹出输入框影响样式)
- 解决手机页面中点击文本框,网页放大问题
- 解决苹果手机点击返回键页面不刷新问题
- 解决ios6下通过Cordova弹出图片选择页面,造成应用crash问题
- 手机点击输入框,弹出输入法会盖住web的文本框问题。
- 手机平台中QQ浏览器在页面中点击一个超链接会刷新整个页面问题解决
- 解决 iphone 下面 input type="search" 弹出虚拟键盘 不能显示 搜索 问题
- 解决分包后导致安卓5.0以下手机点击应用闪退问题
- Android WebView加载带有Input的输入框时点击无法弹出软键盘的问题解决
- IPhone手机页面中点击文本输入框,弹出键盘,网页会放大,如何解决
- 如何解决iphone手机微信浏览器中滑动到页面底部出现黑色背景盖住position:fixed的页面元素的问题?
- 解决手机浏览器上input 输入框导致页面放大的问题(记录)
- 详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
- [Cordova/Phonegap] Cordova iOS 应用在第三方输入法的键盘弹出(点击输入框)时,页面不上移,导致输入框被键盘遮挡 的解决办法
- 解决:用showmodalDialog弹出aspx页面,该页面用来上传附件,点击上传如何不弹出新页面。
- asp.net 退出登陆(解决退出后点击浏览器后退问题仍然可回到页面问题)
- 简单解决input内容过长,撑开页面的问题
- JavaScript页面刷新与弹出窗口问题解决方法