解决思路:
当键盘弹起时隐藏掉按钮,键盘隐藏时按钮显示
监测键盘是否弹起(浏览器页面是否发生变化)
代码:
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. Linux常用命令大全(非常全!!!)(转)

    最近都在和Linux打交道,感觉还不错.我觉得Linux相比windows比较麻烦的就是很多东西都要用命令来控制,当然,这也是很多人喜欢linux的原因,比较短小但却功能强大.我将我了解到的命令列举一 ...

  2. you've successfully authenticated, but Gitee.com does not provide she access.

    如果都是正常的生成ssh的操作,还是会报这个错误,那么就是.... 你没更改文件夹的权限,这个坑跳了很久(汗...) sudo chmod 777 -r 文件夹

  3. Spring Configuration注解使用

    @Configuration是spring.xml的注解版. @ComponentScan是<context:component-scan base-package="com.cosh ...

  4. 遍历tr通过name获取对应值用作判断或者赋值

    $("#table tr:gt(0)").each(function(i){ var bidPrice = $("input[name='bidPrice2s']&quo ...

  5. DBDocumentGenerator使用

    报错1:未能成功安装.NET Framework 3.5(包括.NET2.0和3.0) 解决办法:安装离线包. ( 1.将“sxs”文件复制到C盘,用完后可以删除:2.右键以管理员身份运行NET Fr ...

  6. Spring boot 配置https 实现java通过https接口访问

    近来公司需要搭建一个https的服务器来调试接口(服务器用的spring boot框架),刚开始接触就是一顿百度,最后发现互联网认可的https安全链接的证书需要去CA认证机构申请,由于是调试阶段就采 ...

  7. 兼容ie8总结

    最近做了个兼容ie8的项目,把遇到的一些坑总结一下,欢迎大神指正,共勉. 一. js相关 1.  关于库的引用 jquery只能引用1.x的版本,swiper只能引用2.x的版本. 2. 动态生成的d ...

  8. Dio添加Cookie

    在使用Options添加headers时,Map没有定义内部类型: Dio dio = new Dio(); Map headers = new Map(); headers['Cookie'] = ...

  9. Kafka启动报错 : ERROR Processor got uncaught exception

    参照我之前的一篇博文Kafka学习之(二)Centos下安装Kafka安装了kafka并启动,状况并不像我之前最初的预期,报错了,并且我在当前Linux环境下安装的Java版本.Kafka版本都是和之 ...

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

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