ios输入框取消时让页面滚动到底部

最新推荐文章于 2025-09-23 11:23:28 发布
原创 最新推荐文章于 2025-09-23 11:23:28 发布 · 525 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ios #输入框 #滑动

本文介绍了一种解决iOS设备上输入框失去焦点时页面自动滚动至底部的方法，通过给输入框绑定blur事件并执行window.scroll(0,0)实现。

ios输入框取消时让页面滚动到底部

给输入框绑定 blur事件

$(".input").on(“blur”, function() {
window.scroll(0, 0);
});

解决微信小程序长页面滚动到底部点击底部的输入框后输入框漂浮且页面滚动到顶部
仰望星空的代码
07-03 3096
一、问题描述 项目中有一个长页面上部展示部分信息下部为信息录入，页面长度为三屏幕（不同手机屏幕大小略有差异），当滚动到第二屏或者第三屏去填写信息时点击输入框后输入框漂浮起来了并且页面向上滚动了一段距离，回到了第一屏中展示的内容。效果如图。 滚动到第二屏，证件号输入。 点击输入框 可以看到证件号输入框漂浮了起来并且页面滚动到了第一屏展示的内容。 注意：小程序是2018年上线，在2020年4月份之前该页面从未出现过这种现象。推测：微信的后续更新中对微信小程序基础库进行了重构，导致点击输入框后页
为什么我会被uniapp的iOS输入框内容移动的Bug弄得抓狂？原来是这个小技巧！
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
12-08 616
遇到这个问题时，我花了很多时间尝试不同的解决方案，最终发现通过调整输入框的标签类型和添加固定定位的属性，问题得以轻松解决。希望这个小技巧能帮助正在面临同样问题的开发者节省时间，避免不必要的困扰。有时候，解决问题的办法并不需要太复杂，往往是一个小小的改动就能让整个页面的体验大大提升。在开发过程中，我们总是要不断尝试和摸索，才能找到最适合自己的解决方案。
h5 ios 滚动到底部_解决h5在ios 微信中 input框键盘收起 页面底部留白
weixin_39743622的博客
02-23 268
; (function(window, document) {var browser ={info: (function() {var u =navigator.userAgent;return{trident: u.indexOf('Trident') > -1,presto: u.indexOf('Presto') > -1,webKit: u.indexOf('AppleWebK...
iOS 键盘输入处理（UIScrollView，一般不需要滚动的页面）
weixin_39872861的博客
09-21 763
  //这里，有时候会在keyboardWillChangeFrame后面执行，通知方法里面要做非空判断。     func textFieldShouldBeginEditing(_ textField: UITextField) -> Bool {          isEditTextField = textField         return true     }   ...
ios与安卓禁止所有滚动和输入框上推页面的不同处理方案
qq_15506981的博客
09-09 1677
input ios中的input事件 在ios中input事件与Android中的input事件不同，在安卓中如果有input输入框在页面底部，或者说当聚焦时键盘会遮挡input输入框时，ios系统会上推页面将键盘部分的高度并使页面上推键盘高度的值，因此可以在页面上推的时候获取scrollTop的值暂存，在键盘收起时将暂存的值重新赋值给scrollTop因此实现页面在键盘展开与收起时位置相同。其实在键盘收起时也可以获取一下scrollTop的值，用当前值减去暂存的值就是键盘的高度，也就是页面上推的高度。
datagrid底部显示水平滚动_滚动穿透问题探索
weixin_39623713的博客
12-31 264
在移动端开发中，模态（Modal）弹窗可以说是非常之常见了，作为正在看这篇文章的你，可能写过基于Vue或者小程序的统一弹窗Modal组件；可能处理过定宽高或者不定宽高的情况等，看起来一个小小的模态框其实蕴藏了大大的知识点，本文就带你去探索模态框中的滚动穿透（scroll chaining）问题。背景俗话说，产品有三宝：弹窗、浮层加引导，足以见弹窗在产品同学心目中的地位。对任意一个刚入门的前端同学来...
ios点击input输入框，键盘弹出，此时滑动页面，光标位移
weixin_30528371的博客
06-20 1551
$(_pageId+" section").scroll(function(){ if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)){ $(document.activeElement).blur(); } }); 转载于:https://www.cnblogs.com/colorsed/p/7054709.html...
使用scrollTop(）解决IOS中输入法遮挡输入框问题
08-29
// 使用定时器是因为输入法的弹出会改变 body 的高度，所以延时 1 秒等输入法弹出后再定位到滚动条底部 setTimeout(function() { $('body').scrollTop($('body')[0].scrollHeight); }, 1000); }); ``` 五、总结...
uniapp微信小程序 - 解决苹果ios底部输入框被软键盘遮挡的问题，input/textarea底部输入框被弹出的软键盘挡住部分或全部遮住（解决uniApp小程序底部输入框，键盘弹起时页面整体上移
最新发布
🏆 前端领域优质创作者
09-23 4642
uniapp: IOS微信小程序输入框部分被软键盘遮挡问题，iOS微信小程序键盘弹出时输入框被挡住，uniapp小程序苹果IOS系统软键盘唤起导致底部输入框被遮挡的问题，ios 键盘弹出input输入框被遮挡，uniapp textarea输入框软键盘遮挡问题，苹果手机ios系统，解决uni-app微信小程序底部输入框，键盘弹起时页面整体上移 问题，关于手机端IOS系统微信中虚拟键盘遮挡input输入框问题的解决方案，uniapp使用输入框固定在底部键盘弹起把输入框挡住问题，安卓上没问题就苹果不行，仅ios
解决h5页面在ios端输入框失去焦点后页面不回弹或者底部留白问题（小程序内webview嵌入的h5也适用）
一键写代码的博客
07-02 1626
方法就是在输入框失去焦点后（关闭键盘）让页面滚一下（select 标签导致页面底部留白此方法行不通，当用户未改变select 选中的项就关闭选择框不能触发 change 事件，当用户选中后关闭选择框也不会触发blur事件, 除非点击非select 区域才会blur） 1、原生页面 const windowHeight = window.innerHeight input.addEventListener('blur', function () { let windowFocusHeight = wi
iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案
10-31
iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案 兼容ios8 ios9 ios 10
处理ios软键盘弹起和收起时页面滚动问题
weixin_47664795的博客
09-08 5938
处理ios软键盘弹起和收起时页面滚动问题
解决ios input失焦及滚动卡顿
m0_37293343的博客
03-19 1874
1.input输入框聚焦问题 -webkit-user-select:auto; /*webkit浏览器*/ user-select:auto; -o-user-select:auto; -ms-user-select:auto; 2.滚动行为卡顿问题 overflow: auto; -webkit-overflow-scrolling: touch; overflow-y: scrol...
ios在用户输入点击输入按钮上的完成时页面滚动问题
青阳的博客
04-28 564
在失去焦点强制滚到某位置 document.body.addEventListener('focusout', function () { setTimeout(function(){ $('html,body').stop(true,true).animate({scrollTop:$(document).height()+'px'},0); },200) }); ...
input输入框聚焦时，自动滚动到屏幕顶部，让输入框定位在可见区域
热门推荐
weixin_42199992的博客
10-03 1万+
可以利用scrollIntoView()来解决： $("input").on("focus",function(){ this.scrollIntoView(); }) 介绍一下scrollIntoView()的用法： 调用方法为 element.scrollIntoView() 参数默认为true。 参数为true时调用该函数，页面（或容器）发生滚动，使element的顶部与视图（容...
ios软键盘导致页面滑动问题。
ludaiyijia的博客
08-03 1220
app软键盘问题 环境：移动端。 问题：（ios）点击input打开软键盘的时候，页面会被顶上去，这时候可以滑动页面。软键盘仍然存在。 // 滑动时，收起软键盘 document.body.ontouchstart = function() { if(isFoucs){ // 如果input输入框是获取焦点状态，即有软键盘的时候，才触发收起软键盘事件。 document.activeElement.blur(); // 主要是这个收起软键盘。 isFoucs = false; } } .
关于页面input导致页面可滑动问题（iOS上）
weixin_30430169的博客
04-13 2164
关于页面input导致页面可滑动问题（iOS上） 安卓关于弹出键盘问题可以用resize解决 解决方案：滑动页面的时候让对应的input失去焦点（默认滚动不失去焦点） 1.给input组件添加获取焦点事件，并传人对应input的参数 @onFocus="onFocus(0)" //input绑定获取焦点事件 2.追加事件 onFocus(val){ //获取焦点事件 this.isScro...
h5 ios 滚动到底部_h5 ios的软键盘会把固定定位在底部的导航栏顶上去的解决办法...
weixin_36150766的博客
12-30 952
这个BUG 主要是固定在 ios里面不生效导致的，只要键盘弹起 就会把整个界面给弹上去，尝试了网上各种办法都没有很好地解决后来自己用代码把固定定位的元素给拽下来的 原理就是监听滚动 把固定的元素手动抓下来看代码var u = navigator.userAgent;var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端if (...
H5在苹果手机里唤起输入框后底部出现白条
css_666的博客
01-04 4440
H5网页中，用户输入完成后关闭输入框后底部会出现白条，如下图： 解决方案： 在输入框失去焦点的时候，调用下列代码即可： $(window).scrollTop(0,0); 原理： 用户在输入完成以后，窗口页面可能计算出现错误，因此强制窗口重绘。 ...
h5嵌入app在ios切换输入框时页面抖动
09-04
这主要是iOS WebView的特性所致：软键盘弹起时会压缩页面可视区域，切换输入框时焦点变化触发页面滚动复位，但由于iOS对页面高度监听的支持有限（页面高度变化事件无法可靠触发），导致滚动位置调整不及时或不流畅，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值