解决思路:
当键盘弹起时隐藏掉按钮,键盘隐藏时按钮显示
监测键盘是否弹起(浏览器页面是否发生变化)
代码:
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. luogu P3197 [HNOI2008]越狱

    构造长度为n的串,给定m种颜色,求使得相邻两位的颜色相同的方案数 显然可以看出长度为n的串染m种颜色的总方案数为$m^{n}$ 然后来考虑相邻两位颜色不同的方案 对于第一位,有m种选择 对于剩余的n- ...

  2. mysql数据库设计三范式

    为了建立冗余较小.结构合理的数据库,设计数据库时必须遵循一定的规则.在关系型数据库中这种规则就称为范式.范式是符合某一种设计要求的总结.要想设计一个结构合理的关系型数据库,必须满足一定的范式. 在实际 ...

  3. 【转载】Sikuli安装及使用——基于图像识别自动化工具

    一.Sikuli能做什么? 用屏幕截图的方式,用截出来的图形元素组合出神奇的程序实现自动化安装.卸载软件,自动化测试(Windows.mac应用测试,Web测试,移动端测试) 二.安装Sikuli 预 ...

  4. Rsync使用方法

    Rsync是一款开源.快速.多功能.可实现全量及增量的本地或者远程数据同步的优秀工具.并且支持多系统平台运行.Rsync具有本地与远程两台主机之间的数据快速复制同步镜像.远程备份等功能,该功能类似sc ...

  5. 在mysql 中使用utf8的问题

    在MapReducer插入mysql 遇到了 Incorrect string value: '\xF0\x9F\x98\xAD",...' for column 'commentConte ...

  6. Linux 管理环境变量的文件分为系统级和用户级别

    Linux 管理环境变量的文件分为系统级和用户级别 管理环境变量的文件也分为系统级和用户级别: 1.系统级:/etc/profile:该文件是用户登录时,操作系统定制用户环境时使用的第一个文件,应用于 ...

  7. python 包 笔记

    绝对导入和相对导入 我们的最顶级包glance是写给别人用的,然后在glance包内部也会有彼此之间互相导入的需求,这时候就有绝对导入和相对导入两种方式: 绝对导入:以glance作为起始 相对导入: ...

  8. FL Studio里的常规设置介绍

    上期我们介绍了FL Studio中的项目设置,今天我们来介绍FL Studio中的常规设置.要打开常规设置,我们需要在主菜单中选择选项>常规选项,当然也可以直接按快捷键F10. “常规设置”页面 ...

  9. git checkout --ours 【学习笔记】

    用新分支:git checkout --theirs 文件用master分支:git checkout --ours 文件 执行之后git add

  10. Slimming Plan

    问题 B: Slimming Plan 时间限制: 1 Sec  内存限制: 128 MB 题目描述 Chokudai loves eating so much. However, his docto ...