h5键盘弹出收起时引起的页面变化

news/2024/9/24 4:56:17/

h5键盘弹出收起时引起的页面变化

键盘弹出时会导致窗口发生变化,置于底部的操作项会被顶上来,所以在键盘弹出的时候处理一下页面节点

  • 通过监听页面窗口大小变化判断键盘状态
  • 键盘弹出时隐藏底部操作项
  • 在页面加载完成时执行即可
export function keyboardMonitor() {const originalHeight =document.documentElement.clientHeight || document.body.clientHeight; //监听事件window.onresize = () => {return (() => {const resizeHeight =document.documentElement.clientHeight || document.body.clientHeight;//软键盘弹起与隐藏 都会引起窗口的高度发生变化console.log(resizeHeight, originalHeight);const pageFooter = document.getElementsByClassName("page-footer");if (resizeHeight * 1 < originalHeight * 1) {// @ts-ignorepageFooter[0].style.display = "none";} else {// @ts-ignorepageFooter[0].style.display = "block";}})();};
}

http://www.ppmy.cn/news/1437114.html

相关文章

Day27:阻塞队列、Kafka入门、发送系统通知、显示系统

阻塞队列BlockingQueue BlockingQueue 解决线程通信的问题。阻塞方法:put、take。 生产者消费者模式 生产者:产生数据的线程。消费者:使用数据的线程。 &#xff08;Thread1生产者&#xff0c;Thread2消费者&#xff09; 实现类 ArrayBlockingQueueLinkedBlockingQueuePr…

npm/yarm常用命令

npm命令 标题npm作为嵌入在node中的功能&#xff0c;两个起到相辅相成作用&#xff0c;所以只要安装了node就可以使用npm&#xff01; 查看nodejs版本&#xff1a; node -v 【或 node --version】 查看nodejs版本&#xff1a; npm -v 查看npm下载仓库地址&#xff1a; npm con…

CentOS上如何自定义开机启动服务

一&#xff1a;简单的例子 在CentOS7之后自定义开机启动服务&#xff0c;可以通过创建一个systemd服务单元文件来实现。以下是创建自定义服务并设置其开机启动的步骤&#xff1a; 1&#xff0c;编辑服务文件&#xff0c;并添加以下内容&#xff1a; [Unit] DescriptionMy cu…

一文读懂VR数字展览会,从沉浸式体验到市场竞争力的全方位提升

在数字化转型的浪潮中&#xff0c;VR技术正逐渐成为商业展览的新趋势。VR数字展览会通过创新的展示功能和互动体验&#xff0c;为参展商和观众带来前所未有的便利和效果。 一、VR展示功能的沉浸式体验 1、全方位沉浸式体验&#xff1a; VR技术能够创造一个全方位的三维展览环…

面向对象目录总结

【零】思维导图 【一】初识面向对象 Python 初识面向对象-CSDN博客 【二】面向对象-封装 Python 面向对象之封装和装饰器property_面向对象python封装property-CSDN博客 【三】面向对象-继承 Python 面向对象之继承和组合_面向对象 组合 继承-CSDN博客 【四】面向对象-多…

acwing算法提高之图论--拓扑排序

目录 1 介绍2 训练3 参考 1 介绍 本专题用来记录拓扑排序相关的题目。 求拓扑序列算法的关键步骤&#xff1a; 把入度为0的结点插入队列q。弹出队头t&#xff08;将t记录下来&#xff09;&#xff0c;遍历队头t的下一个结点&#xff0c;将其入度减1。操作之后&#xff0c;如…

Python基础:【习题系列】函数

在Python中,函数内部用来返回值的关键字是什么?( A ) A.return B.output C.yield D.send 答案:A 难易程度:易 答案解析:return关键字用于从函数中返回值,结束函数的执行。 知识点:函数返回值;Python关键字 在Python函数定义中,用于接收任意数量参数的符号是什么…

数字信号处理(MATLAB入门例子)

&#xff08;代码主要来源于这本书&#xff09; 1.用MATLAB产生32个正弦波样本&#xff0c;A2&#xff0c;f1000Hz&#xff0c;以及fs8000Hz % % Example 2.1 Sinewave generator % This example generate 32 sine sample, % plot it and save in sine.dat file% For the boo…