摘要：问题描述吸底的聚焦后，弹出的软键盘将吸底的元素完全或者部分遮挡。然后导致元素被软键盘遮挡高度为的高度。软键盘的高度变化会触发浏览器的事件。
移动端做一个吸底的输入框，首先需要注意两大类设备，安卓和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/102273.html
摘要：问题描述吸底的聚焦后，弹出的软键盘将吸底的元素完全或者部分遮挡。然后导致元素被软键盘遮挡高度为的高度。软键盘的高度变化会触发浏览器的事件。 移动端做一个吸底的输入框，首先需要注意两大类设备，安卓和ios下的浏览器。特别是在ios下，输入框聚焦时fixed定位会出现一些问题，网上也有许多相关的帖子，在此就不再赘述了。今天要提及的是小米全面屏下的miui浏览器。问题描述：吸底的input聚...
摘要：然而，并没有直接监听软键盘的原生事件，只能通过软键盘弹起或收起，引发页面其他方面的表现间接监听，曲线救国。软键盘收起表现触发输入框以外的区域时，输入框失去焦点，软键盘收起。可以让软键盘弹起后，让焦点元素再次滚到可视区，强迫滚到位。 前言 最近一段时间在做 H5 聊天项目，踩过其中一大坑：输入框获取焦点，软键盘弹起，要求输入框吸附（或顶）在输入法框上。需求很明确，看似很简单，其实不然。从...
阅读 1237·2023-04-25 23:47
阅读 889·2021-11-23 09:51
阅读 4285·2021-09-26 10:17
阅读 3686·2021-09-10 11:19
阅读 3237·2021-09-06 15:10
阅读 3533·2019-08-30 12:49
阅读 2366·2019-08-29 13:20
阅读 1712·2019-08-28 18:14
