Javascript 移动浏览器上的虚拟键盘隐藏内容，而不是向上推

我正在制作一个用于聊天的移动web应用程序（使用JavaScript），所以请考虑像Viber或WhatsApp这样的用户界面，或者任何其他聊天应用程序，但要在浏览器中进行

您可以在此处看到动态演示：

您可以通过手机访问此功能。问题已经清楚地说明了

您可以在此处找到代码：

我有一个位置固定的输入表单框，它位于浏览器窗口的底部。消息位于文本框上方，并在文本框后面滚动，就像WhatsApp中的消息框一样。 当我手机上的虚拟键盘出现时，也就是我即将键入某些内容时，文本框确实会向上推，并固定在视口屏幕的底部，如预期的那样位于键盘的正上方。 但是，聊天信息不会向上推。因此，最新消息隐藏在键盘后面

图1：键盘被隐藏

图2：显示键盘，信息隐藏在键盘后面

图3：预期结果，显示键盘，消息向上推

注1：一个主要问题是没有捕获虚拟键盘扩展/折叠的javascript事件

注2:onfocus事件不一定捕获扩展/折叠，因为虚拟键盘可以隐藏，但文本框仍然可以保持焦点

下面是我的代码的简化版本，它模拟了邮件的发布

我希望新发布的消息显示在移动设备的虚拟键盘上方

函数addMsg（e）{
e、 预防默认值（）；
var message=document.createElement（“div”）；
var user=document.createElement（“p”）；
var text=document.createElement（“p”）；
user.appendChild（document.createTextNode（“用户”））；
appendChild（document.createTextNode（“消息”））；
message.appendChild（用户）；
message.appendChild（文本）；
message.classList.add（“聊天信息”）；
document.getElementById（“chats”）.appendChild（消息）；
message.scrollIntoView（）；
返回false；
}

.chat容器{}
.聊天信息{
溢出：滚动；
填充底部：66px；
/*为输入留出空间*/
}
.聊天表格{
宽度：100%；
保证金：0；
位置：固定；
底部：0px；
背景色：#ffffff；
边框顶部：1px实心rgba（0,0,0,0.12）；
填充：7px 8px 7px 8px；
}
输入[类型=文本]{
宽度：96%；
填充：17px 20px；
保证金：0；
背景色：#fafafa；
框大小：边框框；
边界半径：1px；
边界：0px；
盒影：0；
}
.隐藏{
显示：无；
}
.聊天信息{
填充：8px；
边缘底部：8px；
字体大小：14px；
宽度：自动；
最大宽度：90%；
明确：两者皆有；
单词包装：打断单词；
边界半径：3px；
边框样式：实心；
边框宽度：1px；
}
.chat msg p{
保证金：0；
填充：0；
文本对齐：左对齐；
}

---

我相信您可以使用“focusout”事件进行此操作

document.addEventListener（'focusout'，e=>{
滚动到（0，0）；
});

---

还发送了PR:

感谢您的输入。不幸的是，这并不能解决问题。滚动到（0,0）将窗口滚动到顶部，我希望消息滚动到底部。即使我告诉窗口滚动到底部，它也不会将窗口底部视为虚拟键盘的开始，它也不会始终检测到虚拟键盘的存在。结果是，即使有时窗口缩小（帖子的img3）&消息被正确地滚动到视图中，在大多数情况下，与DOM相关的“视图”仍会在虚拟键盘后面继续。