js-解决安卓手机软键盘弹出后,固定定位布局被顶上移问题
分析:软键盘弹出后,导致页面高度变化
解决方案:软键盘弹出后,修复页面高度
// 监听窗口变化
resizeScreen(){
if (!this.state.isIOS && this.state.isInApp) {
var originHeight = document.documentElement.clientHeight || document.body.clientHeight;
this.$nextTick(()=>{
let bodyE = document.querySelector('.pop-other');
window.addEventListener('resize', function() {
var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
if (originHeight < resizeHeight) {
console.log('Android 键盘收起啦!');
// Android 键盘收起后操作
bodyE.style.height = 100+'%';
} else {
console.log('Android 键盘弹起啦!');
// Android 键盘弹起后操作
bodyE.style.height = originHeight+'px';
}
originHeight = resizeHeight;
}, false)
});
}
},
js-解决安卓手机软键盘弹出后,固定定位布局被顶上移问题的更多相关文章
- js防止安卓手机软键盘弹出挤压页面导致变形的方法
5防止安卓手机软键盘弹出挤压页面导致变形的方法 输入框定位在底部,手机端打开,输入框聚焦后软键盘打开为什么会瞬间自动关闭呢? 先看看问题: 1.原来是这样的: 2.在苹果手机里面是正常的: 3.到了安 ...
- 周记3——解决fixed属性在ios软键盘弹出后失效的bug
这周在做空间(“类似”qq空间)项目.首页是好友发表的说说,可以针对每条说说进行评论,评论框吸附固定在屏幕底部.此时,Bug来了...在ios上,软键盘弹出后fixed属性失效了.后来发现,ios绝大 ...
- Ionic3学习笔记(九)关于 Android 端软键盘弹出后界面被压缩的问题
本文为原创文章,转载请标明出处 今天做了一个如下图所示的页面. iOS 端毫无 bug,Android 端却出现了问题.当软键盘弹出后,Android 端的 tabs 移到了软键盘的上面,再仔细一看, ...
- input获取焦点软键盘弹出影响定位
解决移动端底部fixed和input获取焦点软键盘弹出影响定位的问题$(document).ready(function() { var ...
- Android软键盘弹出时把布局顶上去的解决方法
原文: 解决Andriod软键盘出现把原来的布局给顶上去的方法(转) 链接:http://blog.sina.com.cn/s/blog_9564cb6e0101g2eb.html 决方法,在main ...
- KeyboardUtil【软键盘弹出后输入框上移一定的高度】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 演示获取软键盘高度并保存,然后根据输入框的原有位置是否被软键盘挡住了,如果被挡住了则将整体页面上移一定的高度,当软键盘隐藏的时候再下 ...
- 关于ListView中EditText在软键盘弹出后的焦点问题
转自:http://www.cnblogs.com/haofei/p/3305030.html 在ListView中,每次弹出软键盘后就会重新调用getView()方法,导致EditText失去焦点. ...
- Android 软键盘弹出时把布局顶上去,控件乱套解决方法
解决办法:方法一:在你的activity中的oncreate中setContentView之前写上这个代码getWindow().setSoftInputMode(WindowManager.Layo ...
- Android中软键盘弹出时关于布局的问题
当在Android的layout设计里面如果输入框过多,则在输入弹出软键盘的时候,下面的输入框会有一部分被软件盘挡住,从而不能获取焦点输入. 解决办法: 方法一:在你的activity中的oncre ...
- HTML 在安卓手机端软键盘弹出顶起页面布局的解决办法
$('body').height($('body')[0].clientHeight); 以上是背景即BODY被顶起的解决办法. 如果是footer被顶起,则可以用判断解决, $('input').f ...
随机推荐
- Jmeter 之bzm- Concurrency Thread Group 压测
bzm- Concurrency Thread Group 并发线程组代替 jp@gc - Stepping Thread Group线程组. 1. 下载jmeter-plugins-manage ...
- JVM常用调优参数
目录 JVM内存模型及常用参数 参数解释 垃圾收集器 Serial收集器(-XX:+UseSerialGC -XX:+UseSerialOldGC) Parallel Scavenge收集器(-XX: ...
- js任务队列EventLoop
JS 执行机制 在我们学js 的时候都知道js 是单线程的如果是多线程的话会引发一个问题在同一时间同时操作DOM 一个增加一个删除JS就不知道到底要干嘛了,所以这个语言是单线程的但是随着HTML5到来 ...
- All in one入门之All in one和三种PVE、ESXI、Windows Server方案
前言 All in one 前段时间,在某多多上花了446大洋弄了一台J4125准系统小主机,再花了一点钱买个杂牌msata和"全新"三星内存条,入坑了All in one. Al ...
- Ubuntu 22.04 运行 Appimage 文件
解决方法 sudo apt-get update sudo apt install fuse libfuse2 chmod a+x *.appimage 参考资料 https://bynss.com/ ...
- 解决微信小程序 自定义tabBar 切换时候闪烁问题
这个闪烁真的很迷 我搜了一些资料,进行了以下步骤的操作 第一种解决办法 ,把tabbar自定义组件的this.setData中的代码注释掉 显示tabbar中的页面中,添加下面的:这个好像没什么用啊 ...
- ng + zorro angular表格横纵向合并,横向目前是手动,纵向是自动合并,微调后可适配三大框架使用
表格横纵向合并,可以看一下代码编写之前和之后的样式,先上图~~ 表格页面文件.html <h1>正常表格</h1> <nz-table #colSpanTable [nz ...
- node.js接收前端上传的文件并保存到其他位置+后端代码支持进度条
一:直接上传文件,放入body里 1.前端代码 <input type="file" onchange="sendFiles(this.files)"&g ...
- JavaScript 中更安全的 URL 读写
前言 URL对于我们开发人员来讲,应该是非常熟悉了.在对URL进行参数拼接时,我们一般都会直接进行字符串拼接或使用模版字符串,因为这样非常方便,但是我们这样其实会在不知不觉中以不安全的方式编写 URL ...
- 结构型模式 - 享元模式Flyweight
学习而来,代码是自己敲的.也有些自己的理解在里边,有问题希望大家指出. 更像是单例模式 + 简单工厂模式 享元模式的定义与特点 享元(Fiyweight)模式的定义:运用共享技术来有效的支持大量细粒度 ...