iPhone手机上h5页面输入内容后，失去焦点页面底部有空白问题解决

最新推荐文章于 2025-11-01 19:42:08 发布
原创 最新推荐文章于 2025-11-01 19:42:08 发布 · 2k 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#ios某个兼容性问题
本文描述了一个iOS设备上常见的页面布局问题，当在输入框完成输入后，底部按钮停留在屏幕中间，需要手动滚动才能恢复正常。通过使用jQuery的blur事件结合窗口滚动功能，可以实现自动调整页面布局，确保用户体验。

这真是一个cd的问题，这ios也太傲娇了吧
在页面的input框输入完成后，它竟然就挂在那里了，底部的按钮一直在屏幕的中部，多出了一大块空白，要手动滑动几次才能回复正常，不自动归位，真的cd。解决办法如下：

jq方法：
$("input").on("blur",function(){

    //设置屏幕滚回到顶部，很简单很粗暴
    window.scroll("0,0");
})
事情就是这么个事情，解决就是可以这样解决这cd的ios兼容性，done！

在IOS系统上滚动条滚动到指定的位置出现空白页面的解决方案
01-05
原因： -webkit-overflow-scrolling:touch 解释： 由于使用-webkit-overflow-scrolling这个属性，苹果手机会使用硬件加速，从而促使页面滑动得更加流畅，然而也导致了页面出现空白的情况。 解决办法： 滚动之前，先设-webit-overflow-scrolling的属性值为auto，然后页面滚动完了，再设为touch即可。 实例： $(#id).css('-webkit-overflow-scrolling','auto'); $(#id).scrollTop(9999); $(#id).css('-webkit-overflow
解决h5页面在ios端输入框失去焦点后页面不回弹或者底部留白问题（小程序内webview嵌入的h5也适用）
一键写代码的博客
07-02 1688
方法就是在输入框失去焦点后（关闭键盘）让页面滚一下（select 标签导致页面底部留白此方法行不通，当用户未改变select 选中的项就关闭选择框不能触发 change 事件，当用户选中后关闭选择框也不会触发blur事件, 除非点击非select 区域才会blur） 1、原生页面 const windowHeight = window.innerHeight input.addEventListener('blur', function () { let windowFocusHeight = wi
h5 解决ios端输入框失去焦点后页面不回弹或者底部留白问题
weixin_34341229的博客
01-08 3188
项目中遇到了这个问题，说实话 iOS 端问题挺多的，原因找起来比较简单，就是吊起键盘的时候把window的高度挤小了，然后， 关掉键盘页面高度没恢复，安卓手机会自动恢复页面高度。 原因找到了就想解决办法，刚开始想的是 iOS 它不恢复那我也没办法，这属于 iOS 的bug啊或者微信的 bug 啊，但领导不这么想， 页面显示出问题了当然得解决，就在google里翻，也是找到解决方法了，如下链接...
Html5 input在IOS端弹出收起软键盘，导致页面焦点错位的问题解决
沧海龙腾LV的博客
12-04 1957
问题描述：在IOS12以上的微信端，iPhoneX的型号和华为保时捷的型号的微信购物，出现input弹出后结算按钮点击无反应的情况。 分析：是由于IOS端第三方输入法的软键盘弹出后，焦点无法复位。 在 IOS 上，监听输入框的 focus 事件来获知软键盘弹起，监听输入框的 blur 事件获知软键盘收起。 在 Android 上，监听 webview 高度会变化，高度变小获知软键盘弹起，否则...
关于H5移动端 ios端 input输入框失去焦点，页面视觉回弹，但是底部留白问题
ClassMake的博客
08-14 1730
在移动端，当点击输入框时，弹出软键盘，页面被顶上去一截，当输入完毕失去焦点，软键盘关闭时ios上页面高度没恢复，安卓手机会自动恢复页面高度。 解决方法： 在输入框失去焦点后（关闭键盘）让页面滚一下 非框架搭建的页面 const windowHeight = window.innerHeight input.addEventListener(‘blur’, function () { let wi...
移动端iOS网页收起键盘底部有空白
ass_ace
08-31 738
输入框所在的元素用了position:fixed，安卓端一切正常，ios系统在input失焦后键盘缩回去了但是页面不归位。可能原因：键盘事件触发，导致position:fixed失效。 1. 监听输入框的focus、blur 事件 const input = document.getElementsByTagName('input')[0]; let interval; //聚焦时 input.onfocus = () => { interval = setInterval(() =.
vue3：解决H5网页苹果ios手机键盘弹起再收回的时候页面会留白问题，页面软键盘弹起后页面下方空白区域，vue3 h5页面在iphone手机上底部会有留白解决办法（兼容微信公众号H5微信内置浏览器）
最新发布
✅ 精选推荐文章
11-01 3274
vue3 H5解决IOS端微信H5页面软键盘弹起后页面下方留白的问题，h5页面在iphone手机上底部会有留白解决办法，vue3 h5页面IOS唤起键盘后--导致页面底部空白问题，vue3移动端解决h5页面在ios端输入框失去焦点后页面底部留白问题，微信浏览器中，微信H5项目，ios端出现了软键盘输完隐藏后页面不会回弹，下方会有一大块留白，iOS Safari浏览器，h5 移动端 iphone键盘弹起再收回的时候，页面会留白，需要手动下拉，ios弹出键盘后，页面位置有一截空白，移动端IOS的H5页面被键盘顶
h5页面不满一屏在ios底部有空白
weixin_40879482的博客
08-23 644
我整理的一些关于【iOS,H5,css】的项目学习资料（附讲解～～）和大家一起分享、学习一下：https://d.51cto.com/eDOcp1iOS H5 页面空白问题的解决方案 在开发 H5 页面时，我们经常会遇到这样的问题：在 iOS 设备上，如果页面内容没有填满一整屏幕，底部会留有空白。这不仅影响了用户体验，还...
H5页面在iphone手机底部出现留白的情况
m0_55918015的博客
03-01 7010
今天在测试的时候，发现自己的h5页面在iphone手机上，有刘海儿和底部弧形时，底部出现了留白，解决方案是： 找到整个项目的public，index.html，找到其中的meta，加入viewport-fit=cover <meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover"> 这句话的作用就是在适配手机型号的时候，能够自动补齐安全区域（safe area）以后的区域，
解决vue低版本ios，安卓手机浏览器打开H5页面空白的问题
热门推荐
qq_39963516的博客
04-29 1万+
低版ios手机ios8,ios9,安卓6以后的自带浏览器打开VUE开发的H5页面有时候会出现白屏的问题，这是因为vue 项目中es6的方法和语法在这些低版本的手机上不支持，解决办法 es6转es5 一般网上说的流程较为顺利，但是我的看了后面你绝对有所收获，看过不后悔想再来一回 步骤一（较为顺利的解决方案） 1.执行 npm install babel-polyfill 安装一下 babel...
IOS唤起键盘后--导致页面底部空白问题
Riona_cheng的博客
08-26 3886
微信浏览器中，IOS设备12.0版本经常遇到的一个问题
解决网页、H5页面在手机端访问时，底部会有一段莫名其妙的空白，大约有几百像素高的留白
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
04-06 2308
仅需要执行下面这段代码即可解决上图空白区域的留白问题。
uniapp input输入框 在IOS手机无法自动获取焦点
weixin_45376154的博客
11-29 1144
uniapp input输入框 在IOS手机无法自动获取焦点
解决IOS环境下，点击输入框键盘消失页面不回弹
qq_26780317的博客
05-09 2795
前言：复现bug现象，在ios系统中，input输入框唤出键盘后，键盘消失页面却不回弹，安卓手机无此现象。 一、现象图片如下所示： 用户输入完姓名和性别后，键盘回弹时，留下空白区域。 二、解决方案 ...
处理IOS浏览器在input或者textarea获取焦点后底部留一块灰色空白区域的bug
z1048956673的博客
01-07 898
document.body.addEventListener('focusout',function() { window.scrollTo(0,0) },false);
h5页面在iphone手机上底部会有留白解决办法
dss0225的博客
05-21 4135
在meta viewport标签里加属性：viewport-fit=cover； <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover" />
解决ios底部固定输入框，获取焦点时弹出输入法键盘挡住输入框
caimingxian401的博客
11-01 5520
ios端比较常见的，就是在页面底部固定的输入框，如下，一旦获取焦点，弹出的输入法键盘就会把input输入框完全挡住，解决方法很简单，加上下面的几行代码即可       $(".replay_text").on("click", function() { setTimeout(function(){ document.body....
H5微信页面开发 IOS系统 input输入框失去焦点，软键盘关闭后，被撑起的页面无法回退到原来正常的位置，导致弹框里的按钮响应区域错位
weixin_42573146的博客
12-17 1万+
H5微信页面开发，软键盘弹起后，若原输入框被遮挡，页面整体将会上移，然而当输入框失焦，软键盘收起后，页面未恢复，导致弹框里的按钮响应区域错位。 解决方案：给输入框（或select选择框）添加失去焦点的事件，当输入框失去焦点，页面自动滚动到顶部，并且需要加定时器，否则偶尔会失效， $("input,select").blur(function(){ setTimeout(fun...
IOS H5 输入框输入后不显示内容，需要失焦后才显示
m0_37634363的博客
06-16 863
input 框输入文本后，还在 focus 的状态，输入的内容显示空白，点击完成失去焦点后内容才出来 解决方案： input 框增加一个样式 transform: translateZ(0);
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值