H5开发app解决输入文本时，软键盘遮盖掉页面

迷途大灰狼

于 2018-09-04 15:49:05 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： js h5 文章标签： js resize 遮盖 H5 app

本文链接：https://blog.youkuaiyun.com/sqlquan/article/details/82384779

js 同时被 2 个专栏收录

24 篇文章

订阅专栏

4 篇文章

订阅专栏

本文介绍了当软键盘弹出时触发浏览器窗口resize事件的处理方法。提供了两种实现方式：一种是使用jQuery进行监听，另一种是通过JavaScript原生的addEventListener方法来实现。这两种方法都可以有效地检测到软键盘弹出时引发的窗口尺寸变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先我们要清楚输入时候触发软键盘的时候我们触发了什么事件，是调整浏览器窗口的大小时的resize事件

我们知道了触发了什么事件就好办了，我们做一个监听这个事件的方法就好

以下是范例代码，使用了jq的resize监听

		$(window).resize(function() {
		 if($('.input-block').hasClass('resize')){
		  $('.input-block').removeClass('resize')
		 }else{
		  $('.input-block').addClass('resize')
		 }

以下范例代码，是使用了js原生对resize的监听写法

		window.addEventListener('resize', function() {

		});