解决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 相关文章推荐
javascript实现的登陆遮罩效果汇总
Nov 09 Javascript
js实现网页收藏功能
Dec 17 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
Dec 30 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
Jan 05 Javascript
JavaScript实现时间表动态效果
Jul 15 Javascript
EL表达式截取字符串的函数说明
Sep 22 Javascript
React中使用UEditor百度富文本的方法
Aug 22 Javascript
详解ES6中的 Set Map 数据结构学习总结
Nov 06 Javascript
详解原生JS回到顶部
Mar 25 Javascript
vue-cli3跨域配置的简单方法
Sep 06 Javascript
vue遍历对象中的数组取值示例
Nov 07 Javascript
在vue中实现echarts随窗体变化
Jul 27 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
PHP验证码生成原理和实现
2016/01/24 PHP
常用PHP数组排序函数归纳
2016/08/08 PHP
关于php几种字符串连接的效率比较(详解)
2017/02/22 PHP
鼠标图片振动代码
2006/07/06 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
javascript中如何处理引号编码&amp;#034;
2013/08/15 Javascript
jQuery Form 页面表单提交的小例子
2013/11/15 Javascript
SuperSlide2实现图片滚动特效
2014/06/20 Javascript
常用jQuery选择器总结
2014/07/11 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
2016/06/09 Javascript
JavaScript中日期函数的相关操作知识
2016/08/03 Javascript
node.js学习之交互式解释器REPL详解
2016/12/08 Javascript
基于nodejs+express4.X实现文件下载的实例代码
2017/07/13 NodeJs
再谈Angular4 脏值检测(性能优化)
2018/04/23 Javascript
javascript中的闭包概念与用法实践分析
2019/07/26 Javascript
基于JS实现视频上传显示进度条
2020/05/12 Javascript
在Vue中使用HOC模式的实现
2020/08/23 Javascript
[39:11]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第二局
2016/02/28 DOTA
[53:10]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs VG 第一场
2018/04/11 DOTA
python使用筛选法计算小于给定数字的所有素数
2018/03/19 Python
PyCharm配置mongo插件的方法
2018/11/30 Python
Python hexstring-list-str之间的转换方法
2019/06/12 Python
对Django项目中的ORM映射与模糊查询的使用详解
2019/07/18 Python
Keras实现将两个模型连接到一起
2020/05/23 Python
HTML5中的postMessage API基本使用教程
2016/05/20 HTML / CSS
美国领先的礼品卡网站:GiftCards.com
2016/11/02 全球购物
西班牙电子产品购物网站:Electronicamente
2018/07/26 全球购物
荷兰街头时尚之家:Funkie House
2019/03/18 全球购物
北美最大的零售退货翻新商:VIP Outlet
2019/11/21 全球购物
Silk Therapeutics官网:清洁、抗衰老护肤品
2020/08/12 全球购物
廉政教育心得体会
2014/01/01 职场文书
工商企业管理专业自荐信范文
2014/04/12 职场文书
质量安全标语
2014/06/07 职场文书
2014年英语教师工作总结
2014/12/03 职场文书
行政上诉状范文
2015/05/23 职场文书
MySQL图形化管理工具Navicat安装步骤
2021/12/04 MySQL