html5 移动端页面软键盘弹出影响页面布局

最新推荐文章于 2024-04-25 13:30:19 发布

weixin_30765475

最新推荐文章于 2024-04-25 13:30:19 发布

阅读量324

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gpzhen/p/11098431.html

本文分享了在不同手机平台上处理软键盘弹出时页面显示问题的方法。在安卓设备上，通过监听onresize事件可以有效调整窗口大小；而在苹果设备上，此方法失效，应改为监听滚动事件来实现页面的相应调整。

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

1、安卓手机软键盘弹出时窗口减小监听onresize事件就可以解决

2、苹果手机监听onresize事件失效监听滚动事件就可以对页面进行相对应的处理

转载于:https://www.cnblogs.com/gpzhen/p/11098431.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30765475

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue2 - 移动端H5网页点击输入框弹出软键盘后，收起后页面无法复原的问题，页面没能恢复原状+遮盖遮挡+布局出现上移或下移整体未复原到打开软键盘之前（解决弹出键盘导致页面布局错乱，安卓+苹果ios）

资深程序员

04-07

8190

vue，移动端网页，输入框弹起软键盘，布局没有上移，弹出软键盘的时候页面顶起不恢复，实现移动端自动弹起软键盘，软键盘挡住输入框的解决方案，移动端技术问题 — H5页面底部弹出页input输入时整个弹出页被输入法顶起的解决方法，vue h5页面软键盘遮挡等，软键盘顶起页面，H5，input输入时，软键盘弹起不能自动收回，移动端软键盘监听弹出收起及影响定位布局，H5-input弹起键盘遮盖输入框，收起后导致页面无法复原的问题，输入框弹起软键盘，收起后导致页面无法复原的问题，移动端的软键盘对页面css布局影响的解

安卓手机键盘弹出导致h5页面错乱

Senora的博客

04-25

1487

安卓手机键盘弹出导致h5页面错乱 <div class="bg_img" :style="{ height: bodyHeight + 'px' }"> <img class="bg" src="img/bg_test.webp"> <div class="top" style="z-index: 7;"> <img class="title" src="img/top_nav.webp"> <div class="text">

参与评论您还未登录，请先登录后发表或查看评论

安卓Android系统，H5页面键盘弹出后，页面挤压变形或者底部输入框被遮挡的解决办法

haoyanyu_的博客

08-08

2009

键盘弹出挤压页面至变形如下页面，背景图片height: 100%; 底部输入框部分用position:absolute定位，当键盘弹出时，页面整体被挤压；解决方法页面加载后获取视图高度为height，监听window.onresize，指定容器高度为height 存在的问题：偶尔会出现input框获取焦点后，被键盘覆盖，但是在输入内容后滚动到可视区域的现象底部的输入框获焦后，被键...

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

最新发布

weixin_46087056的博客

04-25

1141

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

h5 安卓 软键盘弹出布局压缩

斗战圣佛91的博客

03-30

3746

webapp 使用百分比布局高度，再安卓机器上，点击input软键盘弹出会压缩整个布局增加下面一句可以完美解决： $(document).ready(function () { $('body').height($('body')[0].clientHeight); });

h5中手机键盘弹起时弹窗高度变化

yangyanqin2545的博客

08-14

499

1、input聚焦获取该弹窗元素，将该弹窗元素高度缩小同时滚动到底部。2、template代码部分。

vue 解决移动端弹出键盘导致页面fixed布局错乱的问题

10-16

监听软键盘事件主要目的是在键盘弹出时能够触发某些操作，比如改变页面的滚动行为，或者将键盘弹出时点击的输入框滚动到视口内，避免被键盘遮挡。最后，文章提出了一种实用的解决方案：当键盘弹出时，可以选择隐藏...

手机软键盘弹出时影响布局的解决方法

08-31

在移动应用或网页开发中，一个常见的问题是手机软键盘弹出时会影响到页面的布局，导致内容被遮挡或者页面错位。这个问题在不同设备和浏览器上可能会有不同的表现，特别是Android设备，由于各厂商定制系统的差异，...

h5 监听用户点击 input 输入框弹起软键盘

业余前端的职业经历

12-11

1336

其实判断的依据就是根据用户点击输入框 软键盘弹起来之后引起视口（可视化区域）高度大小的变化整体可能会发生向上移动的效果 // 进入页面之后我们先获取一次可视化区域的高度这个时候啥操作还没做属于正常的情况 var initHeight = document.documentElement.clientHeight ||document.body.clientHeight; 然后监控窗口变化的回调函数进行对比判断然后分别在弹起和收起...

Android原生键盘弹起,H5页面被压缩的两种解决方案

weixin_43780921的博客

11-30

2989

这种方法相对与第一种能更完善解决问题,就是先获取被影响的页面正常显示时的高度,在键盘被掉起时把这个正常的高度赋值给这个元素就行了,简单地说就是给予被挤压页面一个正常的高度值,具体见下面代码,其中 'content' 为我被影响的页面Id.移动H5项目中,会出现input框获得焦点键盘弹出把页面元素顶上去压缩到一起,影响页面布局.方案二：监听页面变化，键盘弹起时将变化之前的高度赋值给压缩后的页面。页面变化,动态的展示和隐藏底部被顶上来的内容。这种方法经调试还不算十分完美。

Html5（移动端）开发，安卓机上的软键盘顶起影响页面布局

热门推荐

sinat_36193631的博客

07-22

1万+

1.可能会出现的bug 一是：页面有输入卡框，在iphone手机上测试，点击输入框时，软键盘弹出，页面正常显示，在安卓机上测试，点击输入框时，软键盘弹出，页面出现压缩具体压缩现象： 1.当所有元素的高度都设置为百分比，或者vh时，都会被压缩（写死固定值不现实） 2.例如banner区域设有轮播图，软键盘弹起时图片会被压缩，变窄 3.当底部设有button按钮的时候，iphone中不会被

html的 button点击事件无效,InfoWindow里面加button，监听button点击事件无效求解啊...

weixin_39997443的博客

06-03

304

该楼层疑似违规已被系统折叠隐藏此楼查看此楼点击infoWindw中的button按钮，无效果；覆盖默认的dom结构html,body,#container {width: 100%;height: 100%;margin: 0px;}p.my-desc {margin: 5px 0;line-height: 150%;}//创建地图var map = new AMap.Map('containe...

html开发，在ios中当软键盘弹出后，position：fixed失效

小馒头丶

10-28

9079

昨天在开发中碰到一个这样的问题，我的input标签的外面的div的css是position：fixed 但是当我用ios系统弹出软键盘的时候，出现的这样的情况当键盘出来的时候，红色的div不见了。然后我就查了一下，是ios里面的就有这个bug。我就试了很多网上的方法都是不行。发现只有ios这样，安卓没有。我就做了个兼容判断 //评论输入框 var inter

解决点击输入框弹出软键盘导致弹窗失效的问题

agi52790的博客

04-28

909

$("input,select").blur(function(){ setTimeout(function() { var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0; wind...

解决html进入全屏模式下监听按下esc失效的问题

a1056189154的博客

07-30

1666

最近在项目中需要做一个html全屏展示，但是展示的内容上附带按钮，想在全屏模式下隐藏按钮然后再退出全屏时按钮又显示，但是之前发现监听key键盘事件是无效的，所以这里采用了另一种方法来解决问题。直接上代码。这里是点击按钮全屏地图事件 var btns = document.getElementById("btns"); function fullClick() { btns.style.display = "none" var el = document.getElementById("map".

安卓系统点击input和textarea框被软键盘破坏布局问题（解决）

TurtleOrange的博客

02-19

1016

解决安卓手机点击input和textarea被软键盘破坏布局的问题

h5(移动端) 监听软键盘弹起、收起

qq_46302247的博客

03-28

8495

https://blog.youkuaiyun.com/qq_38296051/article/details/109290225 https://blog.youkuaiyun.com/qq_42231156/article/details/103490964 https://www.cnblogs.com/rachelch/p/12858938.html ** 1、安卓键盘弹起会触发页面的resize 事件（ios不会），所以可以通过判断页面高度的前后变化来判断键盘的状态。 2、 ios 在键盘收起的时候input 会失去焦

关于html页面移动端软键盘弹出时影响页面布局的问题

nn_nana的博客

10-10

6599

html页面在手机上写了input框的时候，手机的软键盘会弹出，会将页面推上去，页面布局会改变，要在页面写如下代码： $(document).ready(function () { 　　$('body').height($('body')[0].clientHeight); }); 页面加载完后，js给body一个定高。（部分转载，这里只是用作笔记）如果点击输入框弹出的键盘是数

移动端H5开发：带小数点的数字软键盘设计

5. 用户体验：数字软键盘的弹出和隐藏应该流畅，并且在输入时给出合适的反馈，比如通过动画或声音提示用户输入的状态。 6. 安全性考虑：如果软键盘用于输入敏感信息如银行交易金额，还需要考虑加密输入的数据，防止...