解决IOS软键盘关闭后页面无法恢复

最新推荐文章于 2024-04-03 17:55:22 发布

原创最新推荐文章于 2024-04-03 17:55:22 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个用于iOS设备上的网页应用的小技巧。当输入框失去焦点时，通过JavaScript实现页面滚动位置的还原，确保用户体验流畅。适用于前端开发者，特别是那些关注移动端细节优化的工程师。

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

// ios还原窗口

function selectBlur() {

      setTimeout(function () {

            var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;

           window.scrollTo(0, Math.max(scrollHeight - 1, 0));

       }, 100);

}

//用法

<input type="text" @blur="selectBlur()">

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

书剑走江湖

关注关注

1
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

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

资深程序员

04-07

5823

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

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

热门推荐

ZXH2017的博客

12-21

1万+

今天写个公众号，聊天的界面发现调用软键盘以后页面内容上移，但是键盘收起的时候，ios页面内容没有恢复原样，但是android可以先附上结果图：查了很多原因最后找到了解决办法：原理就是弹起键盘的时候，window.scrollY会从0变到键盘的高度，当输入框焦点失去后让scrollY回到0就好了。...

ios12系统的微信浏览器在软键盘收起时，页面无法回滚的bug修复

weixin_34115824的博客

05-06

1080

bug如题，图片如下：有bug的解决方案在输入框上监听blur事件，事件触发后将body滚动至底部。 // el是输入框 el.onblur = () => { window.document.body.scrollTop = window.document.body.scrollHeight; }; 复制代码新写了两bug bug1: 点击“提交留言”按钮，虽然软键盘收起后...

IOS关闭系统键盘后，页面不恢复

wyh_mwk的博客

08-27

276

ios键盘关闭后，页面会往上挪动，页面需要下拉才会恢复原状标签内添加属性 @blur="blur" js写对应方法 blur(){ setTimeout(()=>{ document.activeElement.scrollIntoViewIfNeeded(true); },500); }, ...

关于ios键盘收起推上去的位置没还原留空白的问题

淅淅沥沥的博客

01-28

2179

document.body.addEventListener("focusout", () => { //软键盘收起的事件处理 setTimeout(() => { const scrollHeight = document.documentElement.scrollTop || document.body.scrollT...

IOS开发中键盘输入屏幕上移的解决方法

09-01

在iOS应用开发中，经常会遇到一个常见的问题：当用户在UITextField中输入文本时，弹出的键盘会遮挡屏幕下方的按钮，导致用户无法正常触发这些按钮的事件。为了解决这个问题，开发者需要采取措施让屏幕随键盘的出现而...

微信小程序开发，软键盘唤起导致页面上推穿透导航（关于ios和android全面屏方面兼容需要调整的地方比较多）

u013776700的博客

08-02

3496

uniapp 小程序页面上推定位问题

ios键盘弹出之后页面页面会被强制滚动消失

sinat_39049092的博客

04-17

1117

ios键盘弹出之后页面页面会被强制滚动消失 ios在h5输入框聚焦之后，通常键盘弹起之后再滑动页面就会出现页面内容消失在顶部的问题。实际上解决方案不能从css布局方案考虑，因为这是ios系统的一个特性，所以我最终通过尝试得到的完美解决方案是： window.ontouchmove = function() { $('input').blur(); }; 通过监听页面滚...

解决使用document.activeElement.blur()禁止弹出手机默认键盘ios版本17以上会出现闪屏问题

一个努力不被优化的程序员

04-03

992

这样可以在输入框获取焦点后稍微延迟一段时间再调用`blur()`方法，减少闪屏的可能性。这样可以在屏幕上触摸时调用`blur()`方法，从而隐藏键盘，也可以避免闪屏问题。这些方法可以根据具体情况选择使用，尝试一下看看哪种方法对您的问题最有效。这样可以阻止输入框获取焦点时弹出默认的键盘，从而避免闪屏问题。

ios端，键盘弹出时页面布局混乱解决办法

xsw233的博客

06-16

337

解决ios键盘消失页面不回弹问题

sowhat_WLQ的博客

02-28

1437

let scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0; window.scrollTo(0, Math.max(scrollHeight - 1, 0));

**如何解决ios点击输入框后键盘弹起，键盘收起后，输入框不恢复原位置，页面不能回弹导致下方有空白，弹框的确定按钮不能点击**

weixin_45373521的博客

10-29

719

1.给input框添加blur事件 <input type=“text” placeholder=“手机验证码” maxlength=“4” v-model=“validationCode” @blur=“inputBlur”> 2.在input框失焦后，先判断当前设备的系统是安卓还是ios inputBlur(){ var ua = window.navigator.userAgent.toLowerCase(); if(ua.indexOf(‘android’) > 0) { do

ios关闭软键盘页面不回弹

MtangEr的博客

01-19

2901

移动端 h5 、 ios，输入框获取焦点键盘弹起页面上滑，关闭软键盘后，页面仍在上边不下来？怎么办？（安卓没有这个现象）解决办法：代码如下： $('input,textarea').on('blur',function(){ window.scroll(0,0); }); $('select').on('change',function(){ window.scroll(0,0); }); ...

苹果手机在input失焦时键盘缩回缩后，页面不归位解决方法

羽筠的博客

02-28

3966

苹果手机在input失焦时键盘缩回缩后，页面不归位解决方法 $("input").on("blur",function(){ window.scroll(0,0); //让页面归位 });

ios键盘唤起，键盘收起以后页面不归位问题解决

Alisane的博客

09-19

1405

var u = navigator.userAgent; var flag; var myFunction; var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); if (isIOS) { document.body.addEventListener('focusin', func...

IOS弹出系统键盘后，页面不恢复

Shuanger112的博客

03-15

1128

ios中，键盘的弹起，页面会往上挪动，使输入框展示在页面中间，键盘隐藏页面会下挪恢复原状在6.7.4版本中，不会回挪，这将导致有相对定位（fixed,absolute:相对于浏览器窗体）的节点发生位移，导致节点点击事件偏移而无法选中解决方案：输入框失去焦点（即键盘隐藏时），手动调整页面， document.activeElement.scrollIntoViewIfNeeded(true) ...

el-select在IOS移动端上选项被软键盘顶起错位

11-07

在iOS移动端上，el-select组件可能会遇到一个问题，即当用户聚焦于下拉选择框（option list），软键盘弹出时，页面内容会被顶起，导致select组件的选项显示位置错乱。这是因为iOS系统对于键盘事件处理的方式以及其...