当键盘出现导致崩溃时，滚动到底部 - 腾讯云开发者社区

文章/答案/技术大牛

发布

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

大厂技术坚持周更精选好文问题问题描述：在ios手机中，当页面中包含有输入框时，点击输入框，键盘弹起，会让页面中被fixed的元素失效。所以造成了底部吸底和顶部吸顶的元素错位的问题。...（对于这点，ios本身是支持的，但是安卓却并不会主动让输入框出现在可视区域内） 4、对于部分ios系统下的部分微信webview内，发现软键盘收起时，滚动上去的页面没有滚动下来，造成了下面区域留出了一片灰色的区域...这里参考这篇文章：ios键盘难题与可见视口（visualViewport）api[2] 当时ios设计者考虑到一个问题：当键盘弹起时，页面无法感知到键盘的存在。...；在滚动过程中，还会允许屏幕底部超出页面底部（「滚动过头」），以便让输入框尽可能露出来。...解决办法：当键盘收起时，加入下面其中一种办法就可以解决滚动到顶部 window.scrollTo(0,0) 滚动到底部 window.scrollTo(0, Math.max(document.body.clientHeight

10.9K3 0

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

背景在最近的一个Hybrid App项目中，我实现的H5有以下两个需求：使用quill.js实现富文本编辑器，但是，工具栏需要固定定位到底部，当输入法弹出时，工具栏需要悬浮在输入法键盘之上，如下图所示...当光标聚焦到编辑区输入文字时，系统级的输入法键盘弹出，此时，键盘的弹出对webview的高度会有一定的影响，而android和ios对webview的处理有所不同，简单的说就是： android上：在下图中...但是，ios不会改变webview的高度，因此，当键盘弹出时，工具栏始终位于屏幕底部，从而被键盘遮挡，如此就不符合需求，所以，需要针对ios做特别处理 ios上的解决方案有以下三种解决方案：改设计：...app端，当键盘弹出时，通过事件告知H5键盘的高度，然后H5根据webview的高度和键盘的高度动态的计算工具栏的位置，将其定位到键盘之上。...，到这一步即可解决遮挡的问题如果滚动区的高度大于屏幕的高度，则需要按照如下流程进行处理：源码效果如下：滚动区小于屏幕高度滚动区的高度与屏幕高度相当滚动区高度大于屏幕高度

6.4K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

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

2、IOS13 下，键盘弹起再收起时导致的 DOM 错位先来简单描述一下这两个问题第一个问题 IOS11 下，当你激活定位元素中的输入框的时候，就会发生光标错位第二个问题 IOS13 下，当你激活定位元素中的输入框时...然后我们还需要明确一个事情，就是当激活定位元素的输入框时，页面没有内容了，无法往上滚的时候那么是不会出现光标错位的问题的，像下面这样 ?...4为什么会这样究其原因，其实是 iOS 系统的bug，后续的系统已经修复了 5解决方法虽然是系统bug，但是我们要照顾这部分人群，总不能让人换手机，只能自己解决了先想想，当页面滚动到底部时，激活定位元素的输入框...定位元素输入框激活时，页面已经滚到底部下面来看下实际表现情况因为动图可能不好看明白，直接用三张图第一步，正常情况下，定位元素出现在页面中，保证此时底部的页面已经滑到底部，无法往上滚动 ?...然后我们还要知道另一个事情，就是当页面没有滚到底部时，就激活定位元素中的输入框，那么显示就会是正常的看下图，页面很长，出现弹窗时，没有滚到底部 ?

6K6 1

<a href=" 全栈程序员栈长 • 2天前 • 未分类 • 阅读 0

那么，问题来了，在ios 下，虚拟键盘是浮在页面上层的，导致的结果是当键盘收起后，浮在最底部的按钮不在最底下，而跑到中间来了，(极端条件下还可能挡住输入框导致无法输入)，并且随着屏幕的滚动而滚动，，...两种方案，一滚动时动态计算位置，实时监控位置必定是要消耗性能的，二是由于无法监控到虚拟键盘打开或者关闭，所以只能通过对表单元素绑定focus和blur事件来改变按钮position来达到想要的效果。...搞完后就开始测试，然后有发现当有input元素处于focus状态时，点击提交按钮，无效！！！我再点，好了。。。　　原因是因为blur事件会阻止click事件的执行。。。　好，我继续改。　　...有一定概率出现请求被canceled 。。。各种google没找出原因，，问题出在哪里？...继续各种debug 抓虫子，，历史遗留的坑啊，，最终到了，，当按钮点击事件执行，在请求hash前执行submit , 请求还没返回，由于改变了hash，同步的submit

5451 0

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

在IOS12 上，微信版本 v6.7.4 及以上，输入框获取焦点，键盘弹起，页面（webview）整体往上滚动，当键盘收起后，不回到原位，导致键盘原来所在位置是空白的。...当输入框位于页面下部位置时，在 IOS 上，会将 webview 整体往上滚一段距离，使得该获取焦点的输入框自动处于可视区，而在 Android 则不会这样，它只会改变页面高度，而不会去滚动到当前焦点元素到可视区...兼容 IOS12 + V6.7.4+ 如果你在用 IOS12 和 V6.7.4+版本的微信浏览器打开上面表单输入的 demo ，就会惊奇的发现键盘收起后，原本被滚动顶起的页面并没有回到底部位置，导致原来键盘弹起的位置...在 UC 浏览器上，软键盘弹起后，浏览器上面的标题栏高度就有个高度变小延时动态效果，这样导致 webview 往下滚了一点，底部输入框滚到了非可视区。...了解软键盘弹起页面在 IOS 和 Android 上的表现差异是前提，其次是将焦点元素滚动到可视区，同时要考虑到第三方输入法和某些浏览器上的差别。

4.6K1 2

第三方库兼容坑：某 UI 组件在移动端的适配问题及修复

，存在页面级滚动锁定现象弹层底部按钮被遮挡或与刘海安全区重叠键盘弹出后弹层高度计算错误，出现内容截断或无法滚动页面出现橡皮筋回弹与背景可滚动，影响操作稳定性某些机型点击区域过小或图标文本垂直错位...审查点击区域与文本样式，关注 line-height: 1 导致触控命中率下降与垂直对齐问题根因分析使用 100vh 在移动端包含浏览器 UI，高度不随地址栏与键盘变化祖先 transform...触发新叠加上下文，固定定位在 iOS 行为异常滚动锁定实现不一致，背景滚动与弹层滚动冲突导致回弹未考虑安全区，底部操作区被遮挡文本采用 line-height: 1 使触控区过窄与基线不匹配，出现垂直错位...应急处理将弹层容器高度改为 min-height: 100vh 并增加底部内边距临时禁用祖先 transform 或将弹层提升至根节点挂载对 body 启用滚动锁定，避免背景滚动干扰调整操作区点击热区...弹层打开时对 body 应用 overflow: hidden 或使用稳定的滚动锁定库弹层内部开启 -webkit-overflow-scrolling: touch 提升滚动体验验证要点地址栏显隐与键盘弹出时

2341 0

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

8.9K2 0

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

（谷歌浏览器的设计原则，还有一种可能就是当没有内容的时候光标的高度等于input的line-height的值，当有内容时，光标从input的顶端到文字的底部解决办法：高度height和行高line-height...、页面缺失问题详情描述：在ios端，上下滑动页面时，如果页面高度超出了一屏，就会出现明显的卡顿，页面有部分内容显示不全的情况，例如下图，右图是正常页面，边是ios上下滑动后，卡顿导致如左图下面部分丢失...MDN上是这样定义的： -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。...touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。...0.5秒，因为调用安卓键盘有一点迟钝，导致如果不延时处理的话，滚动就失效了 changefocus(){ let u = navigator.userAgent, app = navigator.appVersion

4.1K3 0

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

（谷歌浏览器的设计原则，还有一种可能就是当没有内容的时候光标的高度等于input的line-height的值，当有内容时，光标从input的顶端到文字的底部解决办法：高度height和行高line-height...、页面缺失问题详情描述：在ios端，上下滑动页面时，如果页面高度超出了一屏，就会出现明显的卡顿，页面有部分内容显示不全的情况，例如下图，右图是正常页面，边是ios上下滑动后，卡顿导致如左图下面部分丢失...MDN上是这样定义的： -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。...touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。...延时0.5秒，因为调用安卓键盘有一点迟钝，导致如果不延时处理的话，滚动就失效了 changefocus(){ let u = navigator.userAgent, app = navigator.appVersion

3.4K3 0

微信小程序解决ios页面上推问题

相信大家写原生小程序都遇到过一个问题，当输入框聚焦键盘弹起时，页面会自动上推，使得输入框刚好位于键盘之上，在安卓中推动的只是内容，但在ios中，推动的是整个页面，导致导航栏被推出屏幕外，如下：图片针对这个问题...键盘弹起后，获取到键盘的高度C，用显示区域B减去键盘区域C就是我们可使用的区域D获取输入栏底部距离显示区域的坐标，如E/H若输入栏底部坐标小于可使用区域D，如H，则说明当键盘弹起时，该输入栏不会被键盘遮挡...F加上页面之前已经有的滚动距离，所以在滚动之前，需要再获取一次当前页面的滚动距离这里可能会存在一个问题，页面的高度不够，无法滚动这么长的距离，因此，当键盘弹起时，这里需要给页面增加高度，这里直接是增加的键盘高度...会默认保留全部小数，我们都知道，js在计算的时候会存在精度问题，有可能会滚动错误解决：获取到元素坐标后，最好只保留两位小数，计算时注意处理精度3、问题：当页面同时有input和textarea时，若只给...会触发多次，某些特殊情况中，每次的高度获取不一致，导致滚动多次解决1：使用方案二解决2：打印每次获取的高度，看哪一次是对的，使用节流或者防抖获取正确的数据5、问题：当页面同时有input和textarea

7.8K3 0

终于等到你，新的虚拟键盘API 即将到来，快来先睹为快吧！

开篇你是否遇到过一个问题，即在移动设备上有一个固定元素，当键盘激活时，该元素会被键盘遮挡？这已经是多年来网络上的默认行为了。...你可能会对由于标题和固定底部的存在而导致的空间减少感到困惑。我们可以使用垂直媒体查询来在垂直空间足够的情况下显示标题。...无法滚动到页面的最底部当视口底部有一个带有 position: fixed 的项目时，我们通常会添加 padding-bottom 来偏移页面，使用户可以滚动到最底部。...使用CSS比较函数时，需要注意在 env() 中使用无单位的数字作为回退值会导致在Safari中出现错误。我们必须添加单位 rem 。...前者用于桌面，后者用于移动设备（当键盘激活时）。100vw 在这种情况下等于键盘的宽度，因此结果为零。min(1rem, 0) 。底部的值将是 1rem 或键盘的高度。

2.1K2 0

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

（谷歌浏览器的设计原则，还有一种可能就是当没有内容的时候光标的高度等于input的line-height的值，当有内容时，光标从input的顶端到文字的底部解决办法：高度height和行高line-height...、页面缺失问题详情描述：在ios端，上下滑动页面时，如果页面高度超出了一屏，就会出现明显的卡顿，页面有部分内容显示不全的情况，例如下图，右图是正常页面，左边是ios上下滑动后，卡顿导致如左图下面部分丢失...MDN上是这样定义的： -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。...touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。...延时0.5秒，因为调用安卓键盘有一点迟钝，导致如果不延时处理的话，滚动就失效了 changefocus(){ let u = navigator.userAgent, app = navigator.appVersion

4.1K4 3

📚一站式解决：H5开发全攻略，看这篇让你省时又省力

当内容滚动到顶部或底部时，滚动事件不会继续传递给父容器。....container { overscroll-behavior: contain; } ⭐️⭐️禁止屏幕抖动通过提前声明滚动容器的padding-right为滚动条宽度，可以防止滚动条的出现导致屏幕抖动...设备上，点击 input 框弹出键盘时，可能会将页面顶起来，导致页面样式错乱。...失去焦点时，键盘收起，键盘区域空白，未回落。原因键盘不能回落问题出现在 iOS 12+ 和 wechat 6.7.4+ 中，而在微信 H5 开发中是比较常见的 Bug。 ...现象滚动穿透（scrolling through）是指在一个固定区域内滚动时，滚动事件透过该区域继续传递到其下方的元素，导致同时滚动两个区域的现象。

2.7K2 1

Android 底部按钮被软键盘顶起问题解决

一般来说，我们的布局分为两种底部按钮被滚动布局包裹底部按钮不被滚动布局包裹第一种布局是不会出现软键盘把底部按钮顶起的情况，首先软键盘的打开实际上是一个 Dialog，而我们在配置文件内的 adjustResize...属性是在页面的根布局 decorView 的子 view 也就是一个线性布局内通过设置 paddingBottom = 软键盘高度，这样其实相当于把整个滚动布局的高度减少了，所以底部的按钮也只是变为需要滚动才能看到...第二种情况通常为一个继续按钮始终处于页面的底部，中间的内容可以滚动，当根布局的内边距等于软键盘高度时，底部按钮就看起来像是被顶起。...从大的方向来说可以通过修改 windowSoftInputMode 来设置布局对软键盘的处理方式，当然也可以通过监听软键盘，这种修改的细粒度更小。...bottomView.visibility = View.VISIBLE } } } } 2、修改 windowSoftInputMode adjustPan 如果设置了这个属性，当软键盘弹出的时候

3K2 0

解决移动端手机浏览器软键盘遮挡输入框问题

在手机端经常有这样的需求 , 最下面是输入框类似微信输入框 , 我们一般设置成了position:fixed 但是当点击到输入框的时候, 软键盘弹出来遮挡了输入框其实解决这个问题非常简单 , 那就是让...body滚动到最底部 , 我们给个滚动最大值就可以了例如下面的jquery: $(window).resize(function(){...$('body').scrollTop(99999999); }); 当窗口大小变化时 , 滚动到最底部 ,微信也是这样的效果 ?...$(window).resize(function(){ var docheight = $(window).height(); /*唤起键盘时当前窗口高度*/ console.log(docheight...this.scrollBottom(); $('body').scrollTop(99999999); // if(docheight 当唤起键盘高度小于未唤起键盘高度时执行

1.9K2 0

2019-08-09 满屏切换vue项目中使用 vue-fullpage.js

// //滚动到最顶部后是否连续滚动到底部 // loopTop: true, // //滚动到最底部后是否连续滚动到顶部 // loopBottom: true...: true, // //是否使用插件滚动方式，设为false后，会出现浏览器自带的滚动条，将不会按页滚动 // autoScrolling: false, // //是否包含滚动条...，当我们要设置一个固定在顶部的菜单、导航、元素等时使用 // paddingTop: "100px", // //设置每个section底部的padding，当我们要设置一个固定在底部的菜单...// //滚动到最顶部后是否连续滚动到底部 // loopTop: true, // //滚动到最底部后是否连续滚动到顶部 // loopBottom: true...，当我们要设置一个固定在顶部的菜单、导航、元素等时使用 // paddingTop: "100px", // //设置每个section底部的padding，当我们要设置一个固定在底部的菜单

13.5K3 0

国产linux操作系统深度系统20.3发布（推荐）

，打开文管后使用全局搜索搜索文件缓慢的问题修复存在加密PDF文件时，勾选全文搜索进行搜索时出现崩溃的问题修复部分机型电脑重启后，三分钟内在桌面右键菜单缺少选项的问题修复手动挂载U盘到/data目录...，删除文件提示无权限的问题修复UDF刻录空的文本文件时，刻录失败的问题修复文件处于选中状态后切换显示状态，再次切换选中后文件底部状态栏未刷新的问题修复VFAT格式U盘无法重命名成4个及以上汉字名称的问题...修复右键压缩文件，弹出两个压缩操作窗口的问题应用商店修复暂停下载任务时概率出现崩溃的问题修复在弹出的二次确认删除框内，无法点击删除或取消按钮的问题修复下载应用时，点击全部暂停无法停止下载进程的问题...cookie标记到了其他网站的问题修复对话框按钮页面汇总文字之间缺少空格的问题修复系统切为繁体、正体时，任务栏图标右键的所有窗口未翻译的问题修复快速点击地址栏前进、后退按钮出现崩溃的问题修复从设备上传超过...，右下角有白色小块的问题画板修复同排文字含有不同字号时，文本光标位置显示错误的问题显卡修复安卓应用游戏《指尖点点消》在部分显卡下大概率出现崩溃问题计算器修复输入框和历史框有内容时清除输入框后输入符号

6.8K2 0

移动端必备的H5问题及解决方案

-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 */ -webkit-overflow-scrolling: auto; /* 当手指从触摸屏上移开...: touch; } 设置滚动条隐藏： .container ::-webkit-scrollbar {display: none;} 可能会导致使用position:fixed; 固定定位的元素，随着页面一起滚动...二、iOS 上拉边界下拉出现白色空白表现手指按住屏幕下拉，屏幕顶部会多出一块白色区域。手指按住屏幕上拉，底部多出一块白色区域。...五、软键盘将页面顶起来、收起未回落问题表现 Android 手机中，点击 input 框时，键盘弹出，将页面顶起来，导致页面样式错乱。移开焦点时，键盘收起，键盘区域空白，未回落。...产生原因我们在app 布局中会有个固定的底部。安卓一些版本中，输入弹窗出来，会将解压 absolute 和 fixed 定位的元素。导致可视区域变小，布局错乱。

5.7K4 2

h5页面在不同iOS设备上的问题总结

在做文章评论的功能时，会遇到很多兼容性的问题，在不同机型上的表现也很不一致，总结了以下这些问题。 1. 日期问题对于yyyy-mm-dd hh:mm:ss 这种格式在ios系统不识别。...键盘收起，页面卡住，不回落 ios12上，发现键盘收起的时候，页面会卡主，留下底部一片空白，稍微动一下页面，就会恢复。...发布按钮，输入完文字，点击“发布”，触发click事件的时候，会导致页面先触发blur事件，键盘回落，然后一切就结束了。。。。...3. ios12在微信小程序的webview，键盘收回，页面底部会留白这个问题怀疑是页面的scroll设置了auto导致的。解决方案：滚动一下页面，请参考链接，代码有效。...键盘遮挡输入框输入框如果使用了fixed固定在底部，键盘顶起的时候，iphone上fixed会失效，导致页面滚动输入框会随着页面滚动，并且在部分机型上，输入框偶尔会被键盘遮挡，这种偶现的问题，很不友好

2.8K2 0

多端开发实践 | 不同手机系统兼容性挑战与实战解决方案

不同操作系统（iOS、Android、鸿蒙）和设备型号在渲染机制、事件处理、API支持等方面存在显著差异，导致键盘遮挡、日期解析异常、滑动穿透等问题时不时产生，而这些问题在开发和测试阶段往往难以完全覆盖...解决方案：滚动补偿算法/** * 自定义Hook：处理键盘弹出时页面自动滚动逻辑 * 当输入框获得焦点（键盘弹出）时，自动调整页面滚动位置确保输入框不被键盘遮挡 * * @param {Object}...：输入框底部位置 > 视口高度的 60% 时触发滚动滚动距离：滚动距离 = 当前滚动位置 + (输入框底部 - 视口高度 * 0.6)滚动行为使用 window.scrollTo 实现平滑滚动（behavior...：弹窗出现时，滑动弹窗会导致背景页面滚动解决方案：滑动锁/** * 高阶组件：用于包裹目标组件，在组件挂载时锁定页面滚动，卸载时恢复滚动 * @param {React.ComponentType} WrappedComponent...const playVideo = async videoEl => { try { await videoEl.play(); } catch (err) { // 处理iOS静音策略：当播放被拒绝时

1.1K3 1

点击加载更多

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

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

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

<a href=" 全栈程序员栈长 • 2天前 • 未分类 • 阅读 0

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

第三方库兼容坑：某 UI 组件在移动端的适配问题及修复

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

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

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

微信小程序解决ios页面上推问题

终于等到你，新的虚拟键盘API 即将到来，快来先睹为快吧！

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

📚一站式解决：H5开发全攻略，看这篇让你省时又省力

Android 底部按钮被软键盘顶起问题解决

解决移动端手机浏览器软键盘遮挡输入框问题

2019-08-09 满屏切换vue项目中使用 vue-fullpage.js

国产linux操作系统深度系统20.3发布（推荐）

移动端必备的H5问题及解决方案

h5页面在不同iOS设备上的问题总结

多端开发实践 | 不同手机系统兼容性挑战与实战解决方案

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐