解决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 相关文章推荐
JS子父窗口互相操作取值赋值的方法介绍
May 11 Javascript
node.js中的fs.statSync方法使用说明
Dec 16 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
Apr 20 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
Aug 24 Javascript
javascript常用函数(2)
Nov 05 Javascript
jquery自适应布局的简单实例
May 28 Javascript
详解vue-cli开发环境跨域问题解决方案
Jun 06 Javascript
vue-cli脚手架引入图片的几种方法总结
Mar 13 Javascript
微信小程序实现全局搜索代码高亮的示例
Mar 30 Javascript
Vue Promise的axios请求封装详解
Aug 13 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
解决vuex数据页面刷新后初始化操作
Jul 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 中执行排序与 MySQL 中排序
2009/04/21 PHP
php判断手机浏览还是web浏览,并执行相应的动作简单实例
2016/07/28 PHP
浅谈mysql_query()函数的返回值问题
2016/09/05 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
phpStorm2020 注册码
2020/09/17 PHP
css动画效果之animation的常用样式
2021/03/09 HTML / CSS
jQuery EasyUI API 中文文档 - Documentation 文档
2011/09/29 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
2011/10/18 Javascript
JS保存和删除cookie操作 判断cookie是否存在
2013/11/13 Javascript
js实现div闪烁原理及实现代码
2014/06/24 Javascript
JavaScript中的类(Class)详细介绍
2014/12/30 Javascript
修复bash漏洞的shell脚本分享
2014/12/31 Javascript
剖析Node.js异步编程中的回调与代码设计模式
2016/02/16 Javascript
移动端点击态处理的三种实现方式
2017/01/12 Javascript
认识less和webstrom的less配置方法
2017/08/02 Javascript
Vue不能检测到Object/Array更新的情况的解决
2018/06/26 Javascript
利用Promise自定义一个GET请求的函数示例代码
2019/03/20 Javascript
解决vue单页面应用中动态修改title问题
2019/06/09 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
2020/03/14 Javascript
解决vue的router组件component在import时不能使用变量问题
2020/07/26 Javascript
分享一个简单的python读写文件脚本
2017/11/25 Python
python生成tensorflow输入输出的图像格式的方法
2018/02/12 Python
基于python实现名片管理系统
2018/11/30 Python
html5 更新图片颜色示例代码
2014/07/29 HTML / CSS
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
瑞士灯具购物网站:Lampenwelt.ch
2018/07/08 全球购物
应聘教师自荐书
2014/06/16 职场文书
学校学习雷锋活动总结
2014/07/03 职场文书
求职意向书
2014/07/29 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
武侯祠导游词
2015/02/04 职场文书
学习十八大的感悟
2015/08/11 职场文书
远程教育培训心得体会
2016/01/09 职场文书
SQL注入的实现以及防范示例详解
2021/06/02 MySQL
logback 实现给变量指定默认值
2021/08/30 Java/Android