解决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 相关文章推荐
会自动逐行上升的文本框
Jun 30 Javascript
用JavaScript实现单继承和多继承的简单方法
Mar 29 Javascript
js动态加载以及确定加载完成的代码
Jul 31 Javascript
jQuery实现id模糊查询的小例子
Mar 19 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
Jul 25 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
Aug 12 Javascript
CSS3 3D 技术手把手教你玩转
Sep 02 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
Nov 25 Javascript
JavaScript实现按键精灵的原理分析
Feb 21 Javascript
JavaScript实现时间表动态效果
Jul 15 Javascript
为什么我们要做三份 Webpack 配置文件
Sep 18 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
Sep 26 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运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
PHP mysql与mysqli事务使用说明 分享
2013/08/17 PHP
PHP写日志的实现方法
2014/11/05 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
基于Codeigniter框架实现的student信息系统站点动态发布功能详解
2017/03/23 PHP
漂亮的widgets,支持换肤和后期开发新皮肤
2007/04/23 Javascript
JQuery与Ajax常用代码实现对比
2009/10/03 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
2013/01/23 Javascript
JS获取节点的兄弟,父级,子级元素的方法
2014/01/09 Javascript
php is_numberic函数造成的SQL注入漏洞
2014/03/10 Javascript
javascript基本语法
2016/05/31 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
js动态添加的DIV中的onclick事件简单实例
2016/07/25 Javascript
深入理解vue-loader如何使用
2017/06/06 Javascript
Angular.JS中select下拉框设置value的方法
2017/06/20 Javascript
使用 jQuery 实现表单验证功能
2017/07/05 jQuery
jquery版轮播图效果和extend扩展
2017/07/18 jQuery
JS返回顶部实例代码
2020/08/09 Javascript
原生JS实现简单的倒计时功能示例
2018/08/30 Javascript
浅谈微信页面入口文件被缓存解决方案
2018/09/29 Javascript
如何自动化部署项目?折腾服务器之旅~
2019/04/16 Javascript
NodeJs实现简易WEB上传下载服务器
2019/08/10 NodeJs
Django如何使用第三方服务发送电子邮件
2019/08/14 Python
美国首屈一指的高品质珠宝设计师和零售商:Allurez
2018/01/23 全球购物
香港现代设计家具品牌:Ziinlife Furniture
2018/11/13 全球购物
餐饮加盟计划书
2014/01/10 职场文书
客户表扬信范文
2014/01/10 职场文书
满月酒答谢词
2014/01/14 职场文书
先进德育工作者事迹材料
2014/01/24 职场文书
竞选宣传委员演讲稿
2014/05/24 职场文书
美术专业自荐信
2014/07/07 职场文书
社区公民道德宣传日活动总结
2015/03/23 职场文书
幼儿园心得体会范文
2016/01/21 职场文书
python flask开发的简单基金查询工具
2021/06/02 Python
Redis入门教程详解
2021/08/30 Redis
Java 异步任务计算FutureTask
2022/04/28 Java/Android