Javascript 在虚拟键盘打开时优雅地防止固定元素移动

对于我维护的web应用程序，我最近引入了一个固定的底部菜单栏。通过

position:fixed

当用户滚动时，此菜单仍粘贴在视口的底部

但是，当用户遇到

textarea

或

input

字段并试图对其进行

focus

时，虚拟键盘会弹出，将前面提到的固定菜单栏推到顶部。有好几次，这种机制最终覆盖了

文本区域

或

输入

的全部内容，从而引发了一个巨大的可用性问题

为了修复它，我编写了一个简单的纯JS解决方案，在

focus

上将

position:fixed

设置为

position:absolute

，然后在

blur

上将其返回到

position:fixed

。在这个问题上，我们已经深入探讨了解决办法

这在一定程度上解决了问题，但解决方案不稳定。让我告诉你怎么做

---

下面的代码实现了我上面解释的解决方案。运行代码段。然后，聚焦

示例文本2

下的

文本区域。这会将底部菜单栏从
fixed
切换到
absolute
，这会导致严重的视觉跳跃。如果您在下面的
text区域尝试同样的方法，情况会恶化

我怎样才能避免令人讨厌的视觉跳跃？理想情况下，我希望
fixed
navbar切换到
absolute
，使其始终粘贴在视口底部。可能吗？希望看到专家们在这方面的例子



var input\u btns=document.getElementsByClassName（'inp'）；//选择所有文本区域或输入进行处理（例如，将固定底部菜单设置为“绝对”）
对于（变量i=0，len=input_btns.length；i{
var bottom\u nav=document.getElementById（“bottom\u nav”）
底部导航类列表。删除（'fix-it'）；
底部导航类列表。添加（'abs-it'）；
}
输入\u btns[i]。onblur=（）=>{
var bottom\u nav=document.getElementById（“bottom\u nav”）
底部导航类列表。删除（'abs-it'）；
底部_nav.classList.add（'fix-it'）；
}
}
。修复它{
位置：固定；
}
.abs it{
位置：绝对位置；
}

示例文本1


示例文本2


示例文本3


示例文本4


示例文本5


示例文本6


示例文本7


底部菜单栏
“粘滞”位置而不是“固定”位置可能有帮助；值得一试。但当虚拟键盘打开时（或浏览器的页脚栏或顶部位置栏，在某些浏览器上都有选择性地显示），手机会破坏你的布局，这似乎是生活中的一个事实，并非完全可以避免，只是可以缓解（无论如何，在我痛苦的经历中）。@avocadatoria:no，
sticky
也有一些怪癖（加上让我不舒服的兼容性问题）。我现在的一部分想法是，当虚拟键盘被调用时，我应该应用
display:none
。uu“粘性”位置而不是“固定”位置可能会有所帮助；值得一试。但当虚拟键盘打开时（或浏览器的页脚栏或顶部位置栏，在某些浏览器上都有选择性地显示），手机会破坏你的布局，这似乎是生活中的一个事实，并非完全可以避免，只是可以缓解（无论如何，在我痛苦的经历中）。@avocadatoria:no，
sticky
也有一些怪癖（加上让我不舒服的兼容性问题）。我现在的一部分想法是，当虚拟键盘被调用时，我应该只应用
display:none
，然后就可以使用它了-_-