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

Question

我正在制作一个移动网络应用程序（使用JavaScript）进行聊天，所以想想用户界面，如Viber或WhatsApp或任何其他聊天应用程序，而不是浏览器。

你可以在这里看到活着的演示：https://mandarini.github.io/chatsim/

您可以通过手机访问此内容。问题清楚地说明了。

您可以在此处找到代码：https://github.com/mandarini/chatsim

我有一个位置固定的输入表格框，它位于浏览器窗口的底部。消息在文本框上方，并在它后面滚动，就像WhatsApp中的消息框一样。 当我的手机上的虚拟键盘出现时，即我要打字的时候，文本框确实被推了起来，并固定在视口屏幕的底部，正好在键盘正上方。 但是，聊天消息不会被推高。因此，最新消息隐藏在键盘后面。

图片1：隐藏键盘

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

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

注1：一个主要问题是没有抓住虚拟键盘扩展/崩溃的javascript事件。

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

下面你可以找到我的代码的简化版本，它可以模拟邮件的发布。

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

function addMsg(e) {
  e.preventDefault();
  var message = document.createElement("div");
  var user = document.createElement("p");
  var text = document.createElement("p");
  user.appendChild(document.createTextNode("User"));
  text.appendChild(document.createTextNode("Message message"));
  message.appendChild(user);
  message.appendChild(text);
  message.classList.add("chat-msg");
  document.getElementById("chats").appendChild(message);
  message.scrollIntoView();
  return false;
}

.chat-container {}

.chat-messages {
  overflow: scroll;
  padding-bottom: 66px;
  /* leaves space for input */
}

.chat-form {
  width: 100%;
  margin: 0;
  position: fixed;
  bottom: 0px;
  background-color: #ffffff;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  padding: 7px 8px 7px 8px;
}

input[type=text] {
  width: 96%;
  padding: 17px 20px;
  margin: 0;
  background-color: #fafafa;
  box-sizing: border-box;
  border-radius: 1px;
  border: 0px;
  box-shadow: 0;
}

.hidden {
  display: none;
}

.chat-msg {
  padding: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  width: auto;
  max-width: 90%;
  clear: both;
  word-wrap: break-word;
  border-radius: 3px;
  border-style: solid;
  border-width: 1px;
}

.chat-msg p {
  margin: 0;
  padding: 0;
  text-align: left;
}

<div id="chat" class="chat-container">
  <div id="chats" class="chat-messages">
  </div>
  <form onsubmit="addMsg(event)" class="chat-form">
    <label>
      <input type="text">
    </label>
    <input class="hidden" type="submit" value="Post" />
  </form>
</div>

Answer 1

我相信你可以使用'focusout'事件。

document.addEventListener('focusout', e => {
  window.scrollTo(0, 0);
});

还发送了PR：https://github.com/mandarini/chatsim/pull/1