解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题


Posted in Javascript onAugust 25, 2018

在用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问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery实现带复选框的表格行选中删除时高亮显示
Aug 01 Javascript
HTML页面登录时的JS验证方法
May 28 Javascript
再谈JavaScript线程
Jul 10 Javascript
js跨域请求数据的3种常用的方法
Dec 01 Javascript
浅谈javascript中关于日期和时间的基础知识
Jul 13 Javascript
详解Javascript数据类型的转换规则
Dec 12 Javascript
Vue.js使用v-show和v-if的注意事项
Dec 13 Javascript
JavaScript模块化之使用requireJS按需加载
Apr 12 Javascript
微信小程序之购物车功能
Sep 23 Javascript
C#实现将一个字符转换为整数
Dec 12 Javascript
Vue利用canvas实现移动端手写板的方法
May 03 Javascript
vue项目中仿element-ui弹框效果的实例代码
Apr 22 Javascript
对vue 键盘回车事件的实例讲解
Aug 25 #Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
Aug 25 #Javascript
vue 自定义指令自动获取文本框焦点的方法
Aug 25 #Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
Aug 25 #Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
Aug 24 #Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
Aug 24 #Javascript
微信小程序Getuserinfo解决方案图解
Aug 24 #Javascript
You might like
Yii框架表单提交验证功能分析
2017/01/07 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
清除网页历史记录,屏蔽后退按钮!
2008/12/22 Javascript
JavaScript的parseInt 进制问题
2009/05/07 Javascript
jquery 弹出层实现代码
2009/10/30 Javascript
判断用户是否在线的代码
2011/03/05 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
easyui datagrid 键盘上下控制选中行示例
2014/03/31 Javascript
jQuery图片轮播滚动切换代码分享
2020/04/20 Javascript
用NODE.JS中的流编写工具是要注意的事项
2016/03/01 Javascript
老生常谈onBlur事件与onfocus事件(js)
2016/07/09 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
2017/03/29 Javascript
React注册倒计时功能的实现
2018/09/06 Javascript
vue mvvm数据响应实现
2020/11/11 Javascript
[00:32]10月24、25日 辉夜杯外卡赛附加赛开赛!
2015/10/23 DOTA
python 布尔操作实现代码
2013/03/23 Python
Python程序设计入门(4)模块和包
2014/06/16 Python
Python中文竖排显示的方法
2015/07/28 Python
深入理解python对json的操作总结
2017/01/05 Python
Android 兼容性问题:java.lang.UnsupportedOperationException解决办法
2017/03/19 Python
Python实现简单的语音识别系统
2017/12/13 Python
python石头剪刀布小游戏(三局两胜制)
2021/01/20 Python
python flask安装和命令详解
2019/04/02 Python
Python pandas实现excel工作表合并功能详解
2019/08/29 Python
pytorch 求网络模型参数实例
2019/12/30 Python
浅谈django channels 路由误导
2020/05/28 Python
基于HTML5代码实现折叠菜单附源码下载
2015/11/27 HTML / CSS
澳大利亚儿童精品仓库:Goo & Co.
2019/06/20 全球购物
事业单位个人应聘自荐信
2013/09/21 职场文书
学院书画协会部门职责
2013/11/28 职场文书
求职信的正确写法
2014/07/10 职场文书
幼儿园中班教师个人总结
2015/02/05 职场文书
医院中层管理人员培训心得体会
2016/01/11 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS
Python语言规范之Pylint的详细用法
2021/06/24 Python
vscode中使用npm安装babel的方法
2021/08/02 Javascript