vue 移动端的软键盘对页面css布局影响的解决办法-底部样式被顶起
2019-04-20 22:50
483 查看
vue 移动端的软键盘对页面css布局影响的解决办法-底部样式被顶起
出现的问题是:输入框聚焦时,手机自带的弹出框把原来的样式顶起。OMG~
出现的效果图片是这样滴:
解决方法:
1.首先要获取整个窗口的高度;
2.找到需要聚焦的模块,我这里是input标签;
3.对input标签使用addEventListener方法;
4.方法function().需要将获取焦点focus的时候,将body的height重新定义为窗口height;
- (详细可以查看addEventListener()方法)
- addEventListner(event,function,useCapture)
我累代码载这~
html部分:
<van-cell-group> <van-field id="myInput1" v-model="mobile" left-icon="manager" type="text" placeholder="请输入手机号" rows="1" autosize/> <van-field id="myInput2" v-model="password" left-icon="lock" type="password" placeholder="初始密码为123456" rows="1" autosize/> </van-cell-group>
因为本人用滴是vue 放在mounted()部分呐~:
mounted() { let h = window.innerHeight; let myInput1 = document.getElementById('myInput1'); let myInput2 = document.getElementById('myInput2'); let Lbody = document.getElementsByClassName('body') myInput.addEventListener('focus',handler,false); myInput2.addEventListener('focus',handler,false); function handler(){ Lbody.height(h); } },
相关文章推荐
- MOSS自带链接样式影响页面全局样式的解决办法
- 明明加载好了css,js文件,页面的样式还是不对的解决办法
- 关于Asp.net2.0下Div+Css布局页面样式实效的解决方法
- 在vue的index.html里引入css,样式不生效的解决办法(100%亲测有效)
- 关于Asp.net2.0下Div+Css布局页面样式实效的解决方法
- 关于Asp.net2.0下Div+Css页面布局样式失效的解决方法
- 关于Asp.net2.0下Div+Css布局页面样式实效的解决方法
- ionic -App开发 | 绝对定位解决软键盘挤压页面影响布局 | 全屏背景图片 | 备忘
- Html5(移动端)开发,安卓机上的软键盘顶起影响页面布局
- css加载导致页面先“朴素”后“华丽”的解决办法
- vue移动端html5页面根据屏幕适配的四种解决方法
- 移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法
- Android 解决在页面底部置输入框,软键盘遮挡部分输入框的问题
- 移动端开发底部元素margin-bottom失效解决办法
- 给UITextField设置分类,会影响UISearchBar样式的解决办法
- 关于移动端h5页面不能滑动问题的解决办法
- 软键盘把底部布局顶上去问题解决
- 有关ie浏览器怪异模式(Quirks Mode)对 HTML 页面的影响的解决办法
- 移动端开发,IOS、iPhone,表单input元素获取焦点时页面被放大的解决办法。
- div布局-子容器设置浮动对于父容器高度自适应产生影响的解决办法