解决思路:
当键盘弹起时隐藏掉按钮,键盘隐藏时按钮显示
监测键盘是否弹起(浏览器页面是否发生变化)
代码:
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. 线段树 HDU-1754 I Hate It

    附上原题链接:http://acm.hdu.edu.cn/showproblem.php?pid=1754 Problem Description 很多学校流行一种比较的习惯.老师们很喜欢询问,从某某 ...

  2. Mysql 导入文件提示 --secure-file-priv option 问题

    MYSQL导入数据出现:The MySQL server is running with the --secure-file-priv option so it cannot execute this ...

  3. GridView设置焦点到Cell

    /// <summary> /// 设置焦点到Cell /// </summary> /// <param name="view"></p ...

  4. docker-images(镜像)

    一.获取镜像 docker search NAME  搜索引擎查找镜像 docker pull NAME:<TAG> 拉去镜像 NAME:表示镜像名称/镜像仓库的名称 TAG: 表示镜像的 ...

  5. 【shell】shuf命令提取文件的随机行

    shuf命令可以随机提取一个文本文件的不同行,输出到文件或者标准输出中. shuf 用法: shuf [选项]... [文件] 或者: shuf -e [选项]... [参数]... 或者: shuf ...

  6. 关于微信unionid理解

    微信开放平台下的UnionID 同一个开放平台账号下,如果有若干个不同App应用,不同Web应用,不同公众平台号,只要是同一个用户,那么他的UnionID相同: 如果开放平台不同,那么不同开放平台下同 ...

  7. AOP之proceedingjoinpoint和joinpoint区别(获取各对象备忘)、动态代理机制及获取原理代理对象、获取Mybatis Mapper接口原始对象

    现在AOP的场景越来越多,所以我们有必要理解下和AOP相关的一些概念和机制. import org.aspectj.lang.reflect.SourceLocation; public interf ...

  8. 根据RadioButtonList动态显示隐藏Div

    使用场景 今天在写项目的时候遇到一个需求,注册页面,用户先选择类型继而填表单,所以需要根据选择切换表单,使用的前端框架是MiniUI,但是在实现这个功能的时候mini.get()方法无法得到div元素 ...

  9. 设计模式理解(八)结构型——装饰者模式(记得加上UML图 --- 未完)

    一段时间没写,又忘了,晕...设计模式这种东西一定要经常用. 装饰者模式(Decorator)用于动态地给一个对象增加一些额外的职责,就增加功能来说,他比生成子类更为灵活. 装饰者模式的原则是: 能用 ...

  10. [c/c++] programming之路(26)、结构体

    一.初始化字符串 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdlib.h> #include&l ...