解决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 动态添加表格行
Jun 22 Javascript
js类 from qq
Nov 13 Javascript
用于自动添加Digg This!按钮的JavaScript
Dec 23 Javascript
定义select的边框颜色
Apr 28 Javascript
基于jquery的cookie的用法
Jan 10 Javascript
javascript (用setTimeout而非setInterval)
Dec 28 Javascript
javascript数组随机排序实例分析
Jul 22 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
Aug 04 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
Sep 08 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
Dec 26 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
May 17 Javascript
最后说说Vue2 SSR 的 Cookies 问题
May 25 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
基于文本的留言簿
2006/10/09 PHP
PHP 七大优势分析
2009/06/23 PHP
PHP封装的一个支持HTML、JS、PHP重定向的多功能跳转函数
2014/06/19 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
js 全兼容可高亮二级缓冲折叠菜单
2010/06/04 Javascript
改变隐藏的input中value值的方法
2014/03/19 Javascript
Javascript的严格模式strict mode详细介绍
2014/06/06 Javascript
理解jquery事件冒泡
2016/01/03 Javascript
jQuery插件formValidator实现表单验证
2016/05/23 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
canvas实现弧形可拖动进度条效果
2017/05/11 Javascript
在React中如何优雅的处理事件响应详解
2017/07/24 Javascript
Vue.js项目模板搭建图文教程
2017/09/20 Javascript
基于Vue的移动端图片裁剪组件功能
2017/11/28 Javascript
vue实现文件上传读取及下载功能
2020/11/17 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
2020/07/20 Javascript
JavaScript实现消消乐的源代码
2021/01/12 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
跟老齐学Python之dict()的操作方法
2014/09/24 Python
Python入门篇之对象类型
2014/10/17 Python
django实现模板中的字符串文字和自动转义
2020/03/31 Python
零基础学Python之前需要学c语言吗
2020/07/21 Python
Python同时迭代多个序列的方法
2020/07/28 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
HTML5 直播疯狂点赞动画实现代码 附源码
2020/04/14 HTML / CSS
美国著名首饰网站:BaubleBar
2016/08/29 全球购物
Lookfantastic瑞典:英国知名美妆购物网站
2018/04/06 全球购物
最新的大学生找工作自我评价
2013/09/29 职场文书
教师辞职报告范文
2014/01/20 职场文书
2015年师德师风自我评价范文
2015/03/05 职场文书
写给同事的离职感言
2015/08/04 职场文书
普希金的诗歌赏析(3首)
2019/08/20 职场文书
销区经理年终述职报告模板
2019/11/28 职场文书
MySQL 使用SQL语句修改表名的实现
2021/04/07 MySQL
关于Python中*args和**kwargs的深入理解
2021/08/07 Python