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

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

赞 (0)

相关推荐

  • vue组件实现弹出框点击显示隐藏效果

    本文实例为大家分享了vue实现弹出框点击显示隐藏的具体代码,供大家参考,具体内容如下 效果如下图 由于我的更改密码弹出框是一个组件引用的,所以在一开始是隐藏的,这就需要在当前的页面上对弹出框组件设置v-show,但是在弹出框显示出来的时候,操作执行完后当前页面的更改按钮已经被弹出框覆盖了.所以只能在弹出页面点击取消实现关闭隐藏弹出框.这样就需要写两个点击事件,但是两个点击事件就会有冲突,需要点击两下才能使弹出框显示和隐藏.然后我就用的以下方法,希望可以帮到大家!!! 代码如下 1.在当前页面中(

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

    在用vue-cli脚手架搭建手机H5页面应用的时候,其中一页中部有input,底部有position:absolute:bottom:0的元素, 当点击input框时在安卓手机上出现了: 1 虚拟键盘弹出盖住input 2 底部定位的元素被挤上来 网络上很多关于body设定宽高以及scrolltop的方法都不管用,因为这里是路由页面,根据网上的思路,吊起输入键盘的时候页面的高度是变化的,监听window.onresize,判断是否吊起键盘,然后设定底部模块的隐藏和显示,整个块元素的margint

  • android虚拟键盘弹出遮挡登陆按钮问题的解决方法

    android虚拟键盘弹出遮挡登陆按钮问题的解决方法

    Android虚拟键盘的弹起会遮挡住部分ui,虽然通过在清单文件中设置,可以随着虚拟键盘的弹出,布局往上推,但是面对登陆界面时,并没有太大的作用,这样就会导致用户体验不好:开发中既然出现了就的解决:先说先解决的思路:获取到屏幕的高度.虚拟键盘的高度,布局的高度,用屏幕的高度减去布局的高度,用高度差和虚拟键盘的高度进行对比:代码实现如下: private LinearLayout logo_layout; private ImageView iv_logo; private int sh; pri

  • 解决Android软键盘弹出覆盖h5页面输入框问题

    之前我们在使用vue进行 h5 表单录入的过程中,遇到了Android软键盘弹出,覆盖 h5页面 输入框 问题,在此进行回顾并分享给大家: 系统:Android 条件:当输入框在可视区底部或者偏下的位置 触发条件:输入框获取焦点,弹出软键盘 表现:软键盘 覆盖 h5页面中的输入框 问题分析: 1.发现问题:当前页面中box为flex布局,内容为上下固定高,中间自适应(中间区域内容过多会出现滚动条,input框在wrapper的底部),input获取焦点,手机键盘弹出,input未上移到可视区内,

  • Vue SPA单页面的应用和对比

    Vue SPA单页面的应用和对比

    目录 一.什么是SPA 二.SPA和MPA的区别 三.单页应用的优缺点 四.怎么解决SPA首屏加载速度慢 1.什么是首屏加载 2.加载慢的原因 3.解决方案 一.什么是SPA SPA(single-page-application)就是单页应用. 它通过动态重写当前页面来与用户交互,这种方法避免了页面之间切换打断用户体验在单页应用中,所有必要的代码(HTML.JavaScript和CSS)都通过单个页面的加载而检索,或者根据需要(通常是为响应用户操作)动态装载适当的资源并添加到页面页面在任何时间

  • 新手vue构建单页面应用实例代码

    新手vue构建单页面应用实例代码

    本文介绍了新手vue构建单页面应用实例代码,分享给大家,具体如下 步骤: 1.使用vue-cli创建项目 2.使用vue-router实现单页路由 3.用vuex管理我们的数据流 4.使用vue-resource请求我们的node服务端 5.使用.vue文件进行组件化的开发 一.目录结构: 二.搭建项目 先安装 vue-cli: sudo npm install -g vue-cli 使用vue-cli构建初始化项目:vue init webpack project(创建webpack项目并下载

  • 利用webstrom调试Vue.js单页面程序的方法教程

    利用webstrom调试Vue.js单页面程序的方法教程

    前言 使用 webstrom 调试 Vue.js 单页面程序,理论上来说应该是支持所有用 webpack 构建的应用程序 webstrom 版本:2017.1 代码:使用 vue-cli 构建的基础单页面应用 修改 webpack 配置 由于 webpack 把所有文件全部打包到一起,所以我们需要 webpack 提供给我们一个源地图 修改 devtool 为 source-map 这是我的开发配置文件 webpack.dev.conf.js module.exports = merge(bas

  • Vue.js 单页面多路由区域操作的实例详解

    单页面多路由区域操作 在一个页面中有两个及以上的<router-view>区域,需要通过设置路由的index.js,来操作这些区域的内容 App.vue 中设置: <router-view></router-view> <router-view name="left" style="float: left;width: 50%; height: 300px;background-color: #ccc;"></r

  • 解决vue 路由变化页面数据不刷新的问题

    每天记录一点点,把我遇到的问题记录下来, 希望可以帮助到更多和我遇到同样问题的人. 问题描述:通过调接口,动态显示帮助页面的问题列表, 问题列表有多级,当点击的这个问题没有下一级问题的时候跳入内容页. 问题出在,我在电脑上做移动端页面的时候,相继跳到详情页,我想返回,点击 按钮,直接跳转到了如上第一张图的样子,no,no,no,这不是我想要的结果,此刻,想到了通过改变url来改变页面的层级问题. 一级的parent为0,默认不显示或显示. 二级的parent为1,点击一级路由变为如图: 点击进入

  • 解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题

    在项目中遇到后台数据还没有加载完毕,但是页面上调用了后台数据中的字段,这样就会报undefined. 例如:一进入页面直接回显数据. 我在created里面请求接口进行赋值 this.matterAll=[]; 会报accessItemName为undefined: 原因以及解决办法: 在上面data()中,我定义了matterAll:[],也就是空的数组, template中,我又直接用了this.matterAll[0],这个时候this.matterAll[0]=undefined,所以t

  • vue 在单页面应用里使用二级套嵌路由

    vue 在单页面应用里使用二级套嵌路由

    在一个单页面应用里使用二级套嵌路由 目录结构如下: 其中main.js为全局配置文件,App.vue为项目入口. main.js中路由配置如下 import Vue from 'vue'//引入vue import App from './App'//引入主模板 import Router from 'vue-router'// 引入router路由 // 引入项目的模块组件 import licai from './components/licai' import home from './c

随机推荐