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 ...
随机推荐
- luogu P3197 [HNOI2008]越狱
构造长度为n的串,给定m种颜色,求使得相邻两位的颜色相同的方案数 显然可以看出长度为n的串染m种颜色的总方案数为$m^{n}$ 然后来考虑相邻两位颜色不同的方案 对于第一位,有m种选择 对于剩余的n- ...
- mysql数据库设计三范式
为了建立冗余较小.结构合理的数据库,设计数据库时必须遵循一定的规则.在关系型数据库中这种规则就称为范式.范式是符合某一种设计要求的总结.要想设计一个结构合理的关系型数据库,必须满足一定的范式. 在实际 ...
- 【转载】Sikuli安装及使用——基于图像识别自动化工具
一.Sikuli能做什么? 用屏幕截图的方式,用截出来的图形元素组合出神奇的程序实现自动化安装.卸载软件,自动化测试(Windows.mac应用测试,Web测试,移动端测试) 二.安装Sikuli 预 ...
- Rsync使用方法
Rsync是一款开源.快速.多功能.可实现全量及增量的本地或者远程数据同步的优秀工具.并且支持多系统平台运行.Rsync具有本地与远程两台主机之间的数据快速复制同步镜像.远程备份等功能,该功能类似sc ...
- 在mysql 中使用utf8的问题
在MapReducer插入mysql 遇到了 Incorrect string value: '\xF0\x9F\x98\xAD",...' for column 'commentConte ...
- Linux 管理环境变量的文件分为系统级和用户级别
Linux 管理环境变量的文件分为系统级和用户级别 管理环境变量的文件也分为系统级和用户级别: 1.系统级:/etc/profile:该文件是用户登录时,操作系统定制用户环境时使用的第一个文件,应用于 ...
- python 包 笔记
绝对导入和相对导入 我们的最顶级包glance是写给别人用的,然后在glance包内部也会有彼此之间互相导入的需求,这时候就有绝对导入和相对导入两种方式: 绝对导入:以glance作为起始 相对导入: ...
- FL Studio里的常规设置介绍
上期我们介绍了FL Studio中的项目设置,今天我们来介绍FL Studio中的常规设置.要打开常规设置,我们需要在主菜单中选择选项>常规选项,当然也可以直接按快捷键F10. “常规设置”页面 ...
- git checkout --ours 【学习笔记】
用新分支:git checkout --theirs 文件用master分支:git checkout --ours 文件 执行之后git add
- Slimming Plan
问题 B: Slimming Plan 时间限制: 1 Sec 内存限制: 128 MB 题目描述 Chokudai loves eating so much. However, his docto ...