h5软键盘弹起 底部按钮被顶起问题解决
解决思路:
当键盘弹起时隐藏掉按钮,键盘隐藏时按钮显示
监测键盘是否弹起(浏览器页面是否发生变化)
代码:
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软键盘弹起 底部按钮被顶起问题解决的更多相关文章
- H5软键盘弹起收回(IOS与Android)
IOS下中,软键盘处于窗口最顶层,与原有的窗口不冲突,所以底部导航条不会被顶起,但是在android下,软键盘与窗口处于同一层,所以当软键盘弹起时,当前窗口缩小,那么窗口内容自然要被挤: 解决办法: ...
- h5 移动端 监听软键盘弹起、收起
前面一篇博客 h5 安卓 键盘弹起界面适配 修改webview高度提到了在adnroid中如何监听软键盘的弹起与收起,是利用的窗口的高度发生变化window.onresize事件来做突破点的,但是io ...
- H5软键盘兼容方案
前言 最近一段时间在做 H5 聊天项目,踩过其中一大坑:输入框获取焦点,软键盘弹起,要求输入框吸附(或顶)在输入法框上.需求很明确,看似很简单,其实不然.从实验过一些机型上看,发现主要存在以下问题: ...
- 可能这些是你想要的H5软键盘兼容方案
前言 最近一段时间在做 H5 聊天项目,踩过其中一大坑:输入框获取焦点,软键盘弹起,要求输入框吸附(或顶)在输入法框上.需求很明确,看似很简单,其实不然.从实验过一些机型上看,发现主要存在以下问题: ...
- 总结几个移动端H5软键盘的大坑
1.部分机型软键盘弹起挡住原来的视图 解决方法:可以通过监听移动端软键盘弹起 Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内.参数如下. true,表示 ...
- Layman 解决MUI 软键盘弹起挤压页面问题
问题:在使用mui和H5+进行移动端开发的时候,经常会遇见需要用户输入的情况 当input获取焦点弹起软键盘的时候,经常会遇见软键盘挤压页面.软键盘遮挡输入框等一系列问题: 原因:造成这种现象的原因是 ...
- android全屏下的输入框未跟随软键盘弹起问题
最近开发中遇到,全屏模式下输入框在底部不会跟随软键盘弹起.于是网上搜索了解决的方案.大致找到了两种方案. 第一种 定义好此类 public class SoftKeyBoardListener { p ...
- Android之监听手机软键盘弹起与关闭
背景: 在很多App开发过程中需要在Activity中监听Android设备的软键盘弹起与关闭,但是Android似乎没有提供相关的的监听API给我们来调用,本文提供了一个可行的办法来监听软键盘的弹起 ...
- android 监控软键盘确定 搜索 按钮并赋予点击事件
在android的实践开发中,为了界面的美观,往往那些搜索框并没有带搜索按钮,而是调用了软键盘的搜索按钮,完成这次时间 1 2 好吧!直接上代码! <EditText android:id=&q ...
随机推荐
- openssl源代码结构
Openssl整个软件包主要包括三个主要的功能模块:密码算法库,SSL协议库,应用程序: 应用程序:主要包括密钥生成,证书管理,格式转换,数据加密,签名,SSL测试等. evp,对称算法,非对称算法, ...
- Git使用和Vue项目
1.创建git排除文件,.gitignore 2.READEME.md 和 LICENSE开源协议 git init 创建仓库 , git status 查看文件状态 红色文件表示未提交. git ...
- oracle 11g 安装步骤
指定安装路径 输入数据库名(cwbpm),(按照自己要求输入,可以直接用默认库名) 输入密码(自定义):123456 (自定义密码) 下一步 选择“是” 点击完成,开始安装数据库 安装完成后会弹出页面 ...
- Qt3D
---------------------------------------------- 概述 - 请阅读QtHelp: Qt 3D Overview https://www.kdab.com/o ...
- OGG 18.1 for mysql远程捕获测试
Ogg18.1 remote capture要求mysql为5.7版本,只能从linux远程捕获mysql on windows or linux,且不支持DDL捕获.支持远程mysql为commun ...
- Java8分组(groupingBy)
1.分组,计数,排序 public class Java8Example1 { public static void main(String[] args) { List<String> ...
- 神经机器翻译 - NEURAL MACHINE TRANSLATION BY JOINTLY LEARNING TO ALIGN AND TRANSLATE
论文:NEURAL MACHINE TRANSLATION BY JOINTLY LEARNING TO ALIGN AND TRANSLATE 综述 背景及问题 背景: 翻译: 翻译模型学习条件分布 ...
- bash 基础命令
bash的基础特性(): () 命令历史 history 环境变量: HISTSIZE:命令历史记录的条数: HISTFILE:~/.bash_history: HISTFILESIZE:命令历史文件 ...
- BZOJ5279: [Usaco2018 Open]Disruption
题目大意:给你一棵n个节点的树,这n条边称为原边,另给出m条带权值的额外边,求删去每条原边后通过给出的m额外条边变回一棵树的最小价值.题解:看完题面以为是Tarjan连通性之类的题目,冷静分析后想到是 ...
- oracle 表空间管理相关(原创)
通过以下几步基本可以查看表空间情况以及处理表空间不足问题. ASM相关 查看asm空间 select group_number,name,total_mb,free_mb from v$asm_dis ...