摘要：问题描述吸底的聚焦后，弹出的软键盘将吸底的元素完全或者部分遮挡。然后导致元素被软键盘遮挡高度为的高度。软键盘的高度变化会触发浏览器的事件。
移动端做一个吸底的输入框，首先需要注意两大类设备，安卓和ios下的浏览器。特别是在ios下，输入框聚焦时fixed定位会出现一些问题，网上也有许多相关的帖子，在此就不再赘述了。
今天要提及的是小米全面屏下的miui浏览器。
问题描述：吸底的input聚焦后，弹出的软键盘将吸底的元素完全或者部分遮挡。
问题原因：当input聚焦后，浏览器弹出软键盘，然后将元素移动到软键盘上方，但全面屏下，miui浏览器少计算了浏览器自带的底部bar的高度。然后导致元素被软键盘遮挡高度为bar的高度。
解决方案：
1.获取window.navigator.userAgent这一字段。
2.判断是否含有"MiuiBrowser"这一字段。
3.判断屏幕的宽高比，当高度大于宽度的2倍时确定为全面屏。
4.记录一开始进入页面时的高度：window.innerHeight。
5.当输入框聚焦后，给输入框加上等于浏览器底部物理bar高度的margin-bottom。然后可以看到正常的输入框了，而且不会被软键盘遮挡。
6.软键盘的高度变化会触发浏览器的resize事件。第一次触发底部输入框聚焦时，记录变化后的window.innerHeight。
7.由于软键盘有收回这种状态，此时软键盘依然存在，但是高度缩小，同样会触发resize，此时可以用window.innerHeight与4中记录的做比较，如果是小于等于4中的高度，而且大于5中记录的高度，那么可以将输入框的margin-bottom的增加值去掉，并且将输入框blur。然后就不会露出很高的底部了。
以上。
建议：在移动端最好不要做吸底的输入框，各个浏览器的实现差距很大。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/117456.html
摘要：问题描述吸底的聚焦后，弹出的软键盘将吸底的元素完全或者部分遮挡。然后导致元素被软键盘遮挡高度为的高度。软键盘的高度变化会触发浏览器的事件。 移动端做一个吸底的输入框，首先需要注意两大类设备，安卓和ios下的浏览器。特别是在ios下，输入框聚焦时fixed定位会出现一些问题，网上也有许多相关的帖子，在此就不再赘述了。今天要提及的是小米全面屏下的miui浏览器。问题描述：吸底的input聚...
摘要：问题描述吸底的聚焦后，弹出的软键盘将吸底的元素完全或者部分遮挡。然后导致元素被软键盘遮挡高度为的高度。软键盘的高度变化会触发浏览器的事件。 移动端做一个吸底的输入框，首先需要注意两大类设备，安卓和ios下的浏览器。特别是在ios下，输入框聚焦时fixed定位会出现一些问题，网上也有许多相关的帖子，在此就不再赘述了。今天要提及的是小米全面屏下的miui浏览器。问题描述：吸底的input聚...
摘要：然而，并没有直接监听软键盘的原生事件，只能通过软键盘弹起或收起，引发页面其他方面的表现间接监听，曲线救国。软键盘收起表现触发输入框以外的区域时，输入框失去焦点，软键盘收起。可以让软键盘弹起后，让焦点元素再次滚到可视区，强迫滚到位。 前言 最近一段时间在做 H5 聊天项目，踩过其中一大坑：输入框获取焦点，软键盘弹起，要求输入框吸附（或顶）在输入法框上。需求很明确，看似很简单，其实不然。从...
摘要：然而，并没有直接监听软键盘的原生事件，只能通过软键盘弹起或收起，引发页面其他方面的表现间接监听，曲线救国。软键盘收起表现触发输入框以外的区域时，输入框失去焦点，软键盘收起。可以让软键盘弹起后，让焦点元素再次滚到可视区，强迫滚到位。 前言 最近一段时间在做 H5 聊天项目，踩过其中一大坑：输入框获取焦点，软键盘弹起，要求输入框吸附（或顶）在输入法框上。需求很明确，看似很简单，其实不然。从...
摘要：刘海屏全屏显示设置应用窗口在华为刘海屏手机使用刘海区应用页面对象清除添加的华为刘海屏，恢复应用不使用刘海区显示。小米适配判断是否是刘海屏。 现在，市面上的屏幕尺寸和全面屏方案五花八门。这里我使用了小米的图来说明：showImg(https://segmentfault.com/img/remote/1460000019422756?w=1552&h=400);上述两种屏幕都可以统称为刘...
阅读 1597·2021-09-22 15:54
阅读 2711·2021-09-01 10:42
阅读 3196·2019-08-30 15:56
阅读 1313·2019-08-29 18:46
阅读 2324·2019-08-29 10:57
阅读 2569·2019-08-28 17:57
阅读 3476·2019-08-23 18:14
阅读 683·2019-08-23 17:03
