javascript - 移动浏览器上的虚拟键盘隐藏内容而不是将其向上推

Question

我正在制作一个用于聊天的移动网络应用程序(使用 JavaScript)，因此请考虑像 Viber 或 WhatsApp 或任何其他聊天应用程序这样的用户界面，但在浏览器中。

你可以在这里看到现场演示:https://mandarini.github.io/chatsim/

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

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

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

图 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