文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当键盘弹出时，iOS 11滚动无限

是指在iOS 11系统中，当键盘弹出时，页面会出现滚动无限的情况。这种情况通常是由于键盘的弹出导致页面布局发生变化，而未正确处理键盘弹出事件所致。

为了解决这个问题，可以采取以下几种方法：

  1. 监听键盘弹出事件：通过监听键盘的弹出事件，可以在键盘弹出时及时做出相应的处理。可以使用NSNotificationCenter来注册键盘弹出和隐藏的通知，然后在通知的回调方法中进行相应的处理。
  2. 调整页面布局：当键盘弹出时，可以通过调整页面布局来适应键盘的显示。可以通过修改页面的约束或者改变ScrollView的contentInset来实现页面的自适应。
  3. 处理键盘遮挡输入框：当键盘弹出时，可能会导致输入框被键盘遮挡而无法输入。可以通过监听键盘的弹出事件，计算键盘的高度，并将输入框滚动到可见区域。
  4. 使用第三方库：iOS开发中有一些第三方库可以帮助处理键盘弹出时的滚动问题，例如TPKeyboardAvoiding、IQKeyboardManager等。这些库可以简化开发过程，提供了一些方便的API来处理键盘弹出时的滚动问题。

总结起来，当键盘弹出时，iOS 11滚动无限可以通过监听键盘弹出事件、调整页面布局、处理键盘遮挡输入框或使用第三方库来解决。这样可以确保页面在键盘弹出时能够正确地进行滚动，提升用户体验。

腾讯云相关产品和产品介绍链接地址：

相关搜索:当软键盘弹出时，片段布局不在键盘上方滚动当键盘模式改变时，iOS - JSQMessage气泡将向下滚动当键盘弹出时布局向上推送当键盘弹出时向上移动布局当键盘弹出时滚动整个html/正文，就像什么应用程序当键盘弹出时，离子输入被推入使用selenium在无限滚动时摆脱弹出窗口当键盘打开时向上滚动Ionic 2当启动片段并滚动时，键盘打开当键盘弹出时，Flutter Google地图调整大小当键盘弹出时，将原点移至顶部时出现黑色当键盘显示时，UITableView滚动到错误位置Flutter:当键盘弹出时，ListView会处理小部件当PMCalendar轻敲或打开时，ios快速关闭键盘当键盘存在时，视图不会上移iOS当键盘出现导致崩溃时，滚动到底部React Native KeyboardAwareScrollView :当键盘隐藏时滚动至末尾当键盘在react-native中打开时，ScrollView无法滚动到底部。[IOS]当键盘打开xamarin窗体时，工具栏将弹出CN1: iOS:当虚拟键盘可见时显示ToastBar
相关搜索:
页面内容是否对你有帮助？
有帮助
没帮助

相关·内容

关于H5在移动端弹出下拉选项时遮挡输入框的问题

当光标聚焦到编辑区输入文字时，系统级的输入法键盘弹出，此时，键盘的弹出对webview的高度会有一定的影响，而android和ios对webview的处理有所不同，简单的说就是： android上：在下图中...，键盘未弹出时，webview的高度 = 左图蓝色框的高度，当键盘弹出时，webview的高度 = 右图蓝色框的高度 - 红色框键盘的高度，也就是说webview的高度为绿色框的高度 ios上：webview...的高度不会随着键盘的弹出而发生改变，始终是左图蓝色框的高度 综上，当工具栏使用fixed来定位时，在android上，当键盘弹出时webview的高度会减小，所以工具栏会悬浮在键盘之上，也就是说，在android...但是，ios不会改变webview的高度，因此，当键盘弹出时，工具栏始终位于屏幕底部，从而被键盘遮挡，如此就不符合需求，所以，需要针对ios做特别处理 ios上的解决方案 有以下三种解决方案： 改设计：...将工具栏放在顶部，这样改动成本最小，兼容性最好，如果能说服产品，那么推荐这种方式 在ios app端，当键盘弹出时，配置webview的高度为屏幕高度 - 键盘高度，也就是与android保持一致的处理方式

5.4K30

【H5】344- 微信 H5 页面兼容性解决方案

（谷歌浏览器的设计原则，还有一种可能就是当没有内容的时候光标的高度等于input的line-height的值，当有内容时，光标从input的顶端到文字的底部 解决办法：高度height和行高line-height...端微信h5页面上下滑动时卡顿、页面缺失 问题详情描述：在ios端，上下滑动页面时，如果页面高度超出了一屏，就会出现明显的卡顿，页面有部分内容显示不全的情况，例如下图，右图是正常页面，边是ios上下滑动后...3、ios键盘唤起，键盘收起以后页面不归位 问题详情描述： 输入内容，软键盘弹出，页面内容整体上移，但是键盘收起，页面内容不下滑 出现原因分析： 固定定位的元素 在元素内 input 框聚焦的时候...里，收起键盘的时候会被顶上去，特别是第三方键盘 4、安卓弹出的键盘遮盖文本框 问题详情描述： 安卓微信H5弹出软键盘后挡住input输入框，如下左图是期待唤起键盘的时候样子，右边是实际唤起键盘的样子 ?...但如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动 5、Vue中路由使用hash模式，开发微信H5页面分享时在安卓上设置分享成功，但是ios的分享异常 问题详情描述： ios当前页面分享给好友

2.7K30

    • 微信 H5 页面兼容性解决方案

    （谷歌浏览器的设计原则，还有一种可能就是当没有内容的时候光标的高度等于input的line-height的值，当有内容时，光标从input的顶端到文字的底部 解决办法：高度height和行高line-height...端微信h5页面上下滑动时卡顿、页面缺失 问题详情描述：在ios端，上下滑动页面时，如果页面高度超出了一屏，就会出现明显的卡顿，页面有部分内容显示不全的情况，例如下图，右图是正常页面，边是ios上下滑动后...3、ios键盘唤起，键盘收起以后页面不归位 问题详情描述： 输入内容，软键盘弹出，页面内容整体上移，但是键盘收起，页面内容不下滑 出现原因分析： 固定定位的元素 在元素内 input 框聚焦的时候 弹出的软键盘占位...里，收起键盘的时候会被顶上去，特别是第三方键盘 4、安卓弹出的键盘遮盖文本框 问题详情描述： 安卓微信H5弹出软键盘后挡住input输入框，如下左图是期待唤起键盘的时候样子，右边是实际唤起键盘的样子 ?...但如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动 5、Vue中路由使用hash模式，开发微信H5页面分享时在安卓上设置分享成功，但是ios的分享异常 问题详情描述： ios当前页面分享给好友，

    3.3K30

    H5页面前端开发常见的兼容性问题解决方法

    IOS 端微信H5页面上下滑动时卡顿和页面缺失 问题描述：在IOS端，上下滑动页面时，如果页面高度超出了一屏，就会出现明显的卡顿，页面有部分内容显示不全的情况。...MDN上是这样定义的： -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果。 auto：使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。...touch：使用具有回弹效果的滚动，当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果，继续滚动的速度和持续的时间和滚动手势的强烈程度成正比，同时也会创建一个新的堆栈上下文。 3....IOS键盘唤起，键盘收起以后页面不归位 问题描述：输入内容，软键盘弹出，页面内容整体上移，但是键盘收起，页面内容不下滑。 解决办法：在输入框失失去焦点的时候添加一个事件，让页面回滚。...安卓弹出的键盘遮盖文本框 问题描述：安卓微信H5弹出软键盘后挡住input输入框，看不到输入的字符。如下左图是期待唤起键盘的时候样子，右边是实际唤起键的样子。

    2.8K10

    移动端那些戳中你痛点的软键盘问题及解决方法

    大厂技术 坚持周更 精选好文 问题 问题描述： 在ios手机中，当页面中包含有输入框时，点击输入框，键盘弹起，会让页面中被fixed的元素失效。所以造成了底部吸底和顶部吸顶的元素错位的问题。...这里参考这篇文章：ios键盘难题与可见视口（visualViewport）api[2] 当时ios设计者考虑到一个问题：当键盘弹起时，页面无法感知到键盘的存在。...在 Android 上，监听 webview 高度会变化，高度变小获知软键盘弹起，否则软键盘收起。 // IOS 键盘弹起：当输入框被聚焦时IOS键盘会被弹起 inputRef?....2、吸底元素（也就是按钮）能够在键盘弹出之后，出现在键盘的上方 对于这个问题，因为安卓表现是webview缩小，所以在安卓上并不存在这个问题，对于ios，因为ios向上滚动的距离最大是键盘的高度，但是也有可能滚动距离不是键盘高度...4、ios软键盘收起时页面不能自然滑落 对于部分ios系统下的部分微信webview内，发现软键盘收起时，滚动上去的页面没有滚动下来，造成了下面区域留出了一片灰色的区域。

    8.5K30

    微信H5页面兼容性解决方案

    （谷歌浏览器的设计原则，还有一种可能就是当没有内容的时候光标的高度等于input的line-height的值，当有内容时，光标从input的顶端到文字的底部 解决办法：高度height和行高line-height...端微信h5页面上下滑动时卡顿、页面缺失 问题详情描述：在ios端，上下滑动页面时，如果页面高度超出了一屏，就会出现明显的卡顿，页面有部分内容显示不全的情况，例如下图，右图是正常页面，左边是ios上下滑动后...3、ios键盘唤起，键盘收起以后页面不归位 问题详情描述： 输入内容，软键盘弹出，页面内容整体上移，但是键盘收起，页面内容不下滑 出现原因分析： 固定定位的元素 在元素内 input 框聚焦的时候...里，收起键盘的时候会被顶上去，特别是第三方键盘 4、安卓弹出的键盘遮盖文本框 问题详情描述： 安卓微信H5弹出软键盘后挡住input输入框，如下左图是期待唤起键盘的时候样子，右边是实际唤起键盘的样子 ?...但如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动 5、Vue中路由使用hash模式，开发微信H5页面分享时在安卓上设置分享成功，但是ios的分享异常 问题详情描述： ios当前页面分享给好友，点击进来是正常

    3.4K43

    收藏 | 移动端H5开发常用技巧总结

    NAN 的问题 将日期字符串的格式符号替换成'/' 'yyyy-MM-dd'.replace(/-/g, '/') 软键盘问题 IOS 键盘弹起挡住原来的视图 可以通过监听移动端软键盘弹起 Element.scrollIntoViewIfNeeded...中 input 键盘事件 keyup、keydown、等支持不是很好, 用 input 监听键盘 keyup 事件，在安卓手机浏览器中没有问题，但是在 ios 手机浏览器中用输入法输入之后，并未立刻相应...keyup 事件 IOS12 输入框难以点击获取焦点，弹不出软键盘 定位找到问题是 fastclick.js 对 IOS12 的兼容性，可在 fastclick.js 源码或者 main.js 做以下修改...键盘收起时页面没用回落，底部会留白 通过监听键盘回落时间滚动到原来的位置 window.addEventListener('focusout', function() { window.scrollTo...下 fixed 失效的原因 软键盘唤起后，页面的 fixed 元素将失效，变成了 absolute，所以当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了。

    4.2K20

    移动端Webapp中的那些Bug

    1.2 解决方案 手动设置滑到边界时的scrollTop（scrollFix） 当快滑到上边界或者下边界的值时，手动设置scrollTop与达到边界时相差一像素(上边界时：scrollTop = 1,...IOS通过脚本使输入框聚焦，无法弹出键盘 2.1 出现场景 看如下代码： // html <input type="email" class="form-control" id="inputEmail3...上输入框聚焦确没有办法<em>弹出</em><em>键盘</em> ?...<em>IOS</em>输入框聚焦后页面整体上移，头部顶出 4.1 出现场景 页面中有fixed头部，输入框，并且输入框靠下<em>时</em>，<em>当</em>输入框focus的时候，会将整个页面上移，导致头部被顶出去。...Android<em>弹出</em>的<em>键盘</em>遮住输入框 5.1 出现场景 <em>当</em>输入框比较靠下<em>时</em>，android上<em>弹出</em><em>键盘</em>，会将输入框遮住。

    3K50

    【移动端bug】iOS 下 Input 和 fixed 的问题

    ，迟早的问题而已，这种兼容性问题真的是很烦人的，文章很长，看是不可能看的了，所以收藏备用吧 本次文章主要描述两个问题 1、IOS11 下，键盘弹起时导致的光标错位 2、IOS13 下，键盘弹起再收起时导致的...DOM 错位 先来简单描述一下这两个问题 第一个问题 IOS11 下，当你激活定位元素中的输入框的时候，就会发生光标错位 第二个问题 IOS13 下，当你激活定位元素中的输入框时，然后输入框失焦，然后再激活的时候...IOS11 下碰到的这个问题 所以发现怎么有时有这个问题，有时又没有。。。...1什么时候会出现 我就列出出现这些问题的包含的元素 ios11 safari 浏览器 定位元素中有输入框 定位元素输入框激活时，页面还有很多内容，仍然能往上滚动 来看一下实际的表现是怎么样的 ?...4为什么会这样 究其原因，其实是 iOS 系统的bug，后续的系统已经修复了 5解决方法 虽然是系统bug，但是我们要照顾这部分人群，总不能让人换手机，只能自己解决了 先想想，当页面滚动到底部时，激活定位元素的输入框

    4.6K61

    【H5】209-可能这些是你想要的H5软键盘兼容方案

    在IOS12 上，微信版本 v6.7.4 及以上，输入框获取焦点，键盘弹起，页面（webview）整体往上滚动，当键盘收起后，不回到原位，导致键盘原来所在位置是空白的。...IOS 软键盘收起表现 触发软键盘上的“收起”按钮键盘或者输入框以外的页面区域时，输入框失去焦点，软键盘收起。 Android 软键盘收起表现 触发输入框以外的区域时，输入框失去焦点，软键盘收起。...但是，触发键盘上的收起按钮键盘时，输入框并不会失去焦点，同样软键盘收起。 ? ?...当输入框位于页面下部位置时，在 IOS 上，会将 webview 整体往上滚一段距离，使得该获取焦点的输入框自动处于可视区，而在 Android 则不会这样，它只会改变页面高度，而不会去滚动到当前焦点元素到可视区...唤起纯数字软键盘 上面的表单输入框有要求输入电话号码，类似这样就要弹出一个数字软键盘了，既然说到了软键盘兼容，在这里就安插一下。

    3.9K12

    WEBAPP开发技巧总结

    当使用HTML5和CSS3l做UI时，若还是遵循着一般web开发中使用HTML4和CSS2那样的开发方式的 话，这也就失去了WEBAPP的本质意义了，且有些效果也无法实现的，所以在此又回到了我们的主题–...在iOS中是不自动识别邮件地 址的，但在Android平台，它会自动检测邮件地址，当用户touch到这个邮件地址时，Android会弹出一个框提示用户发送邮件，如果你不想 Android自动识别页面中的邮件地址...12、如何关闭iOS中键盘自动大写 我们知道在iOS中，当虚拟键盘弹出时，默认情况下键盘是开启首字母大写的功能的，根据某些业务场景，可能我们需要关闭这个功能，移动版本webkit为 input元素提供了...样式属性为none来禁止iOS弹出这些按钮。...因为在iOS中没有滚动条的概念，在Android中通过这两个属性可以正常获取到滚动条的值，那么在iOS中我们该如何获 取滚动条的值呢？

    2K20

    移动web开发需要注意的二十点

    在iOS中是不自动识别邮件地址的，但在Android平台，它会自动检测邮件地址，当用户touch到这个邮件地址时，Android会弹出一个框提示用户发送邮件，如果你不想Android自动识别页面中的邮件地址...11、如何检测用户是通过主屏启动你的webapp 看过Apple webapp API的同学都知道iOS为safari提供了一个将当前页面添加主屏的功能，按下iphone ipod ipod touch...12、如何关闭iOS中键盘自动大写 我们知道在iOS中，当虚拟键盘弹出时，默认情况下键盘是开启首字母大写的功能的，根据某些业务场景，可能我们需要关闭这个功能，移动版本webkit为input元素提供了autocapitalize...样式属性为none来禁止iOS弹出这些按钮。...因为在iOS中没有滚动条的概念，在Android中通过这两个属性可以正常获取到滚动条的值，那么在iOS中我们该如何获取滚动条的值呢？

    1.9K20

    可能这些是你想要的H5软键盘兼容方案

    在IOS12 上，微信版本 v6.7.4 及以上，输入框获取焦点，键盘弹起，页面（webview）整体往上滚动，当键盘收起后，不回到原位，导致键盘原来所在位置是空白的。...IOS 软键盘收起表现 触发软键盘上的“收起”按钮键盘或者输入框以外的页面区域时，输入框失去焦点，软键盘收起。 Android 软键盘收起表现 触发输入框以外的区域时，输入框失去焦点，软键盘收起。...但是，触发键盘上的收起按钮键盘时，输入框并不会失去焦点，同样软键盘收起。 ?...当输入框位于页面下部位置时，在 IOS 上，会将 webview 整体往上滚一段距离，使得该获取焦点的输入框自动处于可视区，而在 Android 则不会这样，它只会改变页面高度，而不会去滚动到当前焦点元素到可视区...唤起纯数字软键盘 上面的表单输入框有要求输入电话号码，类似这样就要弹出一个数字软键盘了，既然说到了软键盘兼容，在这里就安插一下。

    8.1K20

    iOS微信浏览器input聚焦导致页面上移，不能恢复的解决方法

    最近开发的一个项目中有一个获取验证码功能，在测试时遇到了问题。 ? H5页面在iOS系统微信浏览器中，input focus 聚焦时页面会被上推，导致页面整体上移。...blur 失焦后不能恢复，再次点击 input 时没反应，不能聚焦，无法输入内容，这时候需要滑动一下页面才能恢复正常。...解决办法： 比较简单的思路， input 失焦时，页面滚动到顶部（以 jQuery 为例）： $('input').on('blur',function(){     window.scroll(0,0...document.body.scrollTop || 0       window.scrollTo(0, Math.max(scrollHeight - 1, 0)) // 归位     }, 20)   } } 监听键盘弹出关闭...setTimeout(function () {         window.scrollTo({ top: 0, left: 0, behavior: "smooth" })//重点  =======当键盘收起的时候让页面回到原始位置

    3.3K10

    最新iOS设计规范四｜3大界面要素：视图(Views)

    当标题太长时，iOS首先缩小文本，然后如果标题仍然太长直接将其截断。一般来说，请避免在标题中包含你的公司名称或产品名称。 确保活动适合当前上下文。...当浮层出现时，其他视图的交互行为会被禁止，直到浮层被取消/关闭。使用浮层所显示的内容要与当前页面中的内容关联。例如：当你点击“操作”按钮时，许多iPad应用会弹出一个浮层（如下图）。 ?...当滚动视图的缩放选项被打开时，设置比较合适的最大及最小值。例如：放大文本直到一个单一的字符充满整个屏幕，即使其可能对于大部分应用来说是没有意义的。 当滚动视图处于页面模式时考虑显示页面控制元素。...文本视图可以是任何高度，并可以通过滚动的方式显示额外的内容。 默认情况下，文本视图中的文本是左对齐的，并使用黑色的系统字体。如果文本视图可编辑，则在视图内部点击时，屏幕下方会弹出键盘。 ?...显示恰当的键盘类型。iOS提供了几种不同的键盘类型，每种键盘都对应着一种具体的输入方式。为了用户可以流畅地进行数据输入，在编辑文本视图期间显示的键盘，应该适合于该字段中的内容类型。

    8.5K31

    移动端问题收集和解决

    解决方案 1、当input元素focus时，改成position: absolute，blur的时候再将定位改为 position: fixed 2、使用iscroll库 3、使用div内滚动 消除 transition...识别长串数字为电话 禁止 iOS 弹出各种操作窗口 -webkit-touch-callout...textarea置底展示问题 问题描述 ios中的输入唤起键盘后，整个页面会被键盘压缩，也就是说页面的高度变小，并且所有的fixed全部变为了absolute。键盘会将页面顶上去。...解决办法 在实现过程中需要注意下面几个问题： 1、真正的输入框的位置计算： 首先记录无键盘时的window.innerHeight，当键盘弹出后再获取当前的window.innerHeight，...注意：键盘弹起需要一点时间，所以计算当前屏幕高度也需要使用setInterval 4、因为textarea中的文字不能置底显示，当输入超过一行textarea需要自动调整高度，因此将scrollHeight

    1.9K20

    2017移动前端的一些总结web前端 —— 移动端知识的一些总结一.css部分二.js部分

    ，虚拟键盘弹出，整个视窗的 高度 就会变为 减去键盘 的高度，加入你在底部有 fixed的元素比如 btn，这个元素就会跑上来，一般都不会太美观。...我是当 focus时就把它设为 absolute，视情况而定，也有比如显示一个新的层，将含有 fixed按钮的那一层隐藏的情况等等。...另外一种情况（一般在页面内容很少时 iphone5及以上常发生），当输入框弹出时 fixed元素挤到输入框上，当输入框消失时， fixed元素并没有随着输入框的消失而回到底部，这是因为整个视窗的高度还保持在... -webkit-user-select:none 14.当把 input设为 width:100%时，有时可能会遇到 input的宽度超出了屏幕，这时可对 input加一个属性 box-sizing...（这个没用过）  ③ 有的时候比如弹出一个 iphone上滑动出来的层，点击黑色半透明区域弹出层消失，这种可以在黑色区域绑定 touchend也是和 tap差不多的效果 7.当弹窗出现时，想禁止屏幕的滑动

    3.7K40
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券