分析:软键盘弹出后,导致页面高度变化

解决方案:软键盘弹出后,修复页面高度

// 监听窗口变化
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-解决安卓手机软键盘弹出后,固定定位布局被顶上移问题的更多相关文章

  1. js防止安卓手机软键盘弹出挤压页面导致变形的方法

    5防止安卓手机软键盘弹出挤压页面导致变形的方法 输入框定位在底部,手机端打开,输入框聚焦后软键盘打开为什么会瞬间自动关闭呢? 先看看问题: 1.原来是这样的: 2.在苹果手机里面是正常的: 3.到了安 ...

  2. 周记3——解决fixed属性在ios软键盘弹出后失效的bug

    这周在做空间(“类似”qq空间)项目.首页是好友发表的说说,可以针对每条说说进行评论,评论框吸附固定在屏幕底部.此时,Bug来了...在ios上,软键盘弹出后fixed属性失效了.后来发现,ios绝大 ...

  3. Ionic3学习笔记(九)关于 Android 端软键盘弹出后界面被压缩的问题

    本文为原创文章,转载请标明出处 今天做了一个如下图所示的页面. iOS 端毫无 bug,Android 端却出现了问题.当软键盘弹出后,Android 端的 tabs 移到了软键盘的上面,再仔细一看, ...

  4. input获取焦点软键盘弹出影响定位

    解决移动端底部fixed和input获取焦点软键盘弹出影响定位的问题$(document).ready(function() {                                var ...

  5. Android软键盘弹出时把布局顶上去的解决方法

    原文: 解决Andriod软键盘出现把原来的布局给顶上去的方法(转) 链接:http://blog.sina.com.cn/s/blog_9564cb6e0101g2eb.html 决方法,在main ...

  6. KeyboardUtil【软键盘弹出后输入框上移一定的高度】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 演示获取软键盘高度并保存,然后根据输入框的原有位置是否被软键盘挡住了,如果被挡住了则将整体页面上移一定的高度,当软键盘隐藏的时候再下 ...

  7. 关于ListView中EditText在软键盘弹出后的焦点问题

    转自:http://www.cnblogs.com/haofei/p/3305030.html 在ListView中,每次弹出软键盘后就会重新调用getView()方法,导致EditText失去焦点. ...

  8. Android 软键盘弹出时把布局顶上去,控件乱套解决方法

    解决办法:方法一:在你的activity中的oncreate中setContentView之前写上这个代码getWindow().setSoftInputMode(WindowManager.Layo ...

  9. Android中软键盘弹出时关于布局的问题

     当在Android的layout设计里面如果输入框过多,则在输入弹出软键盘的时候,下面的输入框会有一部分被软件盘挡住,从而不能获取焦点输入. 解决办法: 方法一:在你的activity中的oncre ...

  10. HTML 在安卓手机端软键盘弹出顶起页面布局的解决办法

    $('body').height($('body')[0].clientHeight); 以上是背景即BODY被顶起的解决办法. 如果是footer被顶起,则可以用判断解决, $('input').f ...

随机推荐

  1. Windows 安装 Zookeeper 详细步骤

    Windows 安装 Zookeeper 详细步骤 一. Zookeeper 安装包下载 1.官网地址 Zookeeper官网 2.安装包下载 这里选择目前的稳定版 3.6.3 下载 可以看到有两个选 ...

  2. .NET周报【12月第2期 2022-12-15】

    国内文章 九哥聊Kestrel网络编程第一章:开发一个Redis服务器 https://mp.weixin.qq.com/s/HJYnBE-7wbvkAYHxQaq3eQ 我和拥有多个.NET 千星开 ...

  3. Jmeter 之吞吐量控制器

    作用: 吞吐量控制器可用来模拟混合场景的压测业务,即一部分用户执行场景A,一部分用户执行场景B 字段说明: Total Excutions:执行请求总数 Percent Excutions:执行线程数 ...

  4. JavaScript:操作符:操作符的特点

    在JS中,所有的操作符,都同时在做两件事,第一件事是进行计算,第二件事是返回计算的结果,这个结果需要有变量去接收,否则就成为无人认领的数据而被垃圾回收: 在JS中,有很多不常用的操作符以及语法,容易让 ...

  5. 如何在C#中接受或拒绝 Excel 中的修订

    修订功能可以跟踪文档所有的修改,了解修改的过程,这对于团队协同文档编辑.审阅是非常有用的一个功能.将工作簿发送给他人审阅时,我们可以开启修订功能,共享工作簿被修改后,用户查看文档时可以选择接受或者拒绝 ...

  6. 官网下载CentOS系统镜像过程

    想学习CentOS系统,但是不知道镜像去哪里搞,随便去个第三方发现要么要注册,要么各种广告病毒,或者好不容易找到官网,不仅全英文,有些专业术语也不懂,本文说明官网下载自己想要的CentOS镜像整个流程 ...

  7. 实现简单的csv文件上传和bootstrap表格的下载

    一.写一个简单的页面并发送文件 引入bootstrap.js,jQuery.js等,具体的网页就不细写了,很简单. 加入input框,button控件,进度条.如下: <li class=&qu ...

  8. [1]SpinalHDL安装环境

    [1]SpinalHDL安装环境 最好的教程是官方文档!不过推荐英文文档 英文版 中文版 一.安装java环境 SpinalHDL相当于是scala的一个包,而scala是运行在jvm上的.所以我们先 ...

  9. 异常的产生过程解析-throw关键字

    异常的产生过程解析 先运行下面的程序,程序会产生一个数组索引越界异常ArrayIndexOfBoundException.我们通过图解来解析下异常产生的过程. 工具类 throw关键字 在编写程序时, ...

  10. 让Apache Beam在GCP Cloud Dataflow上跑起来

    简介 在文章<Apache Beam入门及Java SDK开发初体验>中大概讲了Apapche Beam的简单概念和本地运行,本文将讲解如何把代码运行在GCP Cloud Dataflow ...