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 ...
随机推荐
- python 错误之TypeError: XXXXX() takes no keyword arguments
举个例子: str1 = 'sunlightn' f = str1.rfind("n", __start=1, __end=2) print(f) 以上代码运行后出现: " ...
- 2022年7月13日,第四组,周鹏,JS做计算器代码
代码不难,看了我前面笔记的应该能看懂. 没看?(= ̄ω ̄=)喵了个咪(๑‾᷅^‾᷅๑) 嫌弃你 还看啥,去看啊!要不直接复制代码吧!( ̄へ ̄)( ̄へ ̄)( ̄へ ̄) Document 0 / * - 7 ...
- 工业数据分析为什么要用FusionInsight MRS IoTDB?
摘要:MRS IoTDB,它是华为FusionInsight MRS大数据套件中的时序数据库产品,在深度参与Apache IoTDB社区开源版的基础上推出的高性能企业级时序数据库产品. 本文分享自华为 ...
- Solon Java Framework v1.12.0 发布
一个更现代感的 Java 应用开发框架:更快.更小.更自由.没有 Spring,没有 Servlet,没有 JavaEE:独立的轻量生态.主框架仅 0.1 MB. @Controller public ...
- 第七节 VOR/DME进近程序保护区的绘制
飞行程序设计软件实践 通过前面六节的练习,2023社区版插件的主要功能都已经使用到了.今天通过VOR/DME非精密进近程序,再将这些功能串起来使用一下.今天的软件,我们使用浩辰CAD2023版(过期后 ...
- Spark通信框架RPC介绍
Spark通信框架RPC介绍 内容安排: 1.RPC原理 2.nio操作 3.netty简单的api 4.自定义RPC框架 RPC原理学习 什么是RPC RPC(Remote Procedure Ca ...
- python进阶之路3之数据类型
内容概要 pycharm下载与使用 python语法之注释 python语法之变量与常量 python基本数据类型(先大致了解有哪些) pycharm下载与使用 1.该软件分为收费版和免费版 免费版本 ...
- 《Effective C++》再次探索traits技法
首先介绍C++标准程序库中的五种迭代器,关于这个可以看我的另一个笔记:http://blog.csdn.net/m0_37316917/article/details/70053513. 对于这五种分 ...
- P7076 [CSP-S2020] 动物园
题面 动物园里饲养了很多动物,饲养员小 A 会根据饲养动物的情况,按照<饲养指南>购买不同种类的饲料,并将购买清单发给采购员小 B. 具体而言,动物世界里存在 \(2^k\) 种不同的动物 ...
- Curve 文件存储在 Elasticsearch 冷热数据存储中的应用实践
Elasticsearch在生产环境中有广泛的应用,本文介绍一种方法,基于网易数帆开源的Curve文件存储,实现Elasticsearch存储成本.性能.容量和运维方面的显著提升. ES 使用 Cur ...