解决思路:
当键盘弹起时隐藏掉按钮,键盘隐藏时按钮显示
监测键盘是否弹起(浏览器页面是否发生变化)
代码:
1、定义一个底部按钮

<div class="returnbtn" v-show="isOriginHei" :class="{active: canSubmit}" v-on:click="sendSubmit()">提交</div>

2、设置默认显示和两个屏幕的初始值(此处定义在vue的data中)

  isOriginHei: true,
  screenHeight: document.documentElement.clientHeight, //此处也可能是其他获取方法
  originHeight: document.documentElement.clientHeight,

3、在mounted里面挂载检测浏览器变化

  mounted() {
    let self = this;
    window.onresize = function() {
      return (function(){
        self.screenHeight = document.documentElement.clientHeight;
      })()
    }
  }

4、在watch中监测屏幕变化

  screenHeight (val) {
    if(this.originHeight > val + 100) { //加100为了兼容华为的返回键
      this.isOriginHei = false;
    }else{
      this.isOriginHei = true;
    }
  }

作者:kuke_kuke
来源:CSDN
原文:https://blog.csdn.net/qq_33599109/article/details/79086411

h5软键盘弹起 底部按钮被顶起问题解决的更多相关文章

  1. H5软键盘弹起收回(IOS与Android)

    IOS下中,软键盘处于窗口最顶层,与原有的窗口不冲突,所以底部导航条不会被顶起,但是在android下,软键盘与窗口处于同一层,所以当软键盘弹起时,当前窗口缩小,那么窗口内容自然要被挤: 解决办法: ...

  2. h5 移动端 监听软键盘弹起、收起

    前面一篇博客 h5 安卓 键盘弹起界面适配 修改webview高度提到了在adnroid中如何监听软键盘的弹起与收起,是利用的窗口的高度发生变化window.onresize事件来做突破点的,但是io ...

  3. H5软键盘兼容方案

    前言 最近一段时间在做 H5 聊天项目,踩过其中一大坑:输入框获取焦点,软键盘弹起,要求输入框吸附(或顶)在输入法框上.需求很明确,看似很简单,其实不然.从实验过一些机型上看,发现主要存在以下问题: ...

  4. 可能这些是你想要的H5软键盘兼容方案

    前言 最近一段时间在做 H5 聊天项目,踩过其中一大坑:输入框获取焦点,软键盘弹起,要求输入框吸附(或顶)在输入法框上.需求很明确,看似很简单,其实不然.从实验过一些机型上看,发现主要存在以下问题: ...

  5. 总结几个移动端H5软键盘的大坑

    1.部分机型软键盘弹起挡住原来的视图 解决方法:可以通过监听移动端软键盘弹起 Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内.参数如下. true,表示 ...

  6. Layman 解决MUI 软键盘弹起挤压页面问题

    问题:在使用mui和H5+进行移动端开发的时候,经常会遇见需要用户输入的情况 当input获取焦点弹起软键盘的时候,经常会遇见软键盘挤压页面.软键盘遮挡输入框等一系列问题: 原因:造成这种现象的原因是 ...

  7. android全屏下的输入框未跟随软键盘弹起问题

    最近开发中遇到,全屏模式下输入框在底部不会跟随软键盘弹起.于是网上搜索了解决的方案.大致找到了两种方案. 第一种 定义好此类 public class SoftKeyBoardListener { p ...

  8. Android之监听手机软键盘弹起与关闭

    背景: 在很多App开发过程中需要在Activity中监听Android设备的软键盘弹起与关闭,但是Android似乎没有提供相关的的监听API给我们来调用,本文提供了一个可行的办法来监听软键盘的弹起 ...

  9. android 监控软键盘确定 搜索 按钮并赋予点击事件

    在android的实践开发中,为了界面的美观,往往那些搜索框并没有带搜索按钮,而是调用了软键盘的搜索按钮,完成这次时间 1 2 好吧!直接上代码! <EditText android:id=&q ...

随机推荐

  1. 工厂方法 Factory Method

    背景:有一个应用框架,它可以向用户显示多个文档.在这个框架中,两个主要的抽象是类Application和Document.这两个类都是抽象的.客户必须通过它们的子类来做与举替应用相关的实现. 分析:因 ...

  2. linux安装sz && rz功能

    [1]编译安装 root 账号登陆后,依次执行以下命令: cd /tmp wget http://www.ohse.de/uwe/releases/lrzsz-0.12.20.tar.gz . ./c ...

  3. Oarcle 之DML

    DML:数据操纵语言(Data Manipulation Language, DML)是SQL语言中,负责对数据库对象运行数据访问工作的指令集,以INSERT.UPDATE.DELETE三种指令为核心 ...

  4. centos7安装配置jdk

    ① java -version 可以查看系统自带的openjdk版本信息 ② rpm -qa | grep java  查看系统自带的Java文件 ③ 卸载文件(noarch文件可以不用删除) -- ...

  5. java面向对象总结(一)

    1. 对象的概念及面向对象的三个基本特征 面向对象的三大核心特性 面向对象开发模式更有利于人们开拓思维,在具体的开发过程中便于程序的划分,方便程序员分工合作,提高开发效率.面向对象程序设计有以下优点. ...

  6. 修改tomcatlog输出等级

    /usr/local/tomcat2/webapps/digital/WEB-INF/classes/log4j.properties log4j.properties配置如下(配置是转载): log ...

  7. MTK-LCM 屏幕使用fbconfig/PanelMaster来调试LCM驱动

    屏幕调试是我们做的较多的工作,且以MIPI屏为主,调试时总是会遇到一些参数需要一点一点配的时候,这样的工作其实很是繁琐,在我们确认完硬件没有问题时能不能使用简易的方法来解决这个问题呢 ? MTK已经为 ...

  8. 与TIME_WAIT相关的几个内核参数

    问题 公司用浏览器访问线上服务一会失败一会成功,通过ssh连接服务器排查时发现ssh也是这样: 检查 抓包后发现建立连接的请求已经到了服务器,但它没有响应: 纠结了好久,后来在腾讯云技术支持及查了相关 ...

  9. 洲阁筛 & min_25筛学习笔记

    洲阁筛 给定一个积性函数$F(n)$,求$\sum_{i = 1}^{n}F(n)$.并且$F(n)$满足在素数和素数次幂的时候易于计算. 显然有: $\sum_{i = 1}^{n} F(n) = ...

  10. Java笔试

    异常 Throwable是Java错误处理的父类,有两个子类:Error和Exception. Error:无法预期的严重错误,导致JVM虚拟机无法继续执行,几乎无法恢复捕捉的 Exception:可 ...