防止在 Web 应用程序的移动视图上提交表单时键盘关闭

Question

我正在创建一个 PHP Javascript 聊天应用程序。 每当我单击发送按钮时，它都会向下滑动/关闭键盘。 如果我需要发送新消息，我必须再次点击textarea字段以使键盘向上滑动/出现以进行输入。 每次发送后这种不需要的键盘关闭很烦人。 我没有在这里包含任何代码，因为这不是我的脚本中发生的编码错误。 这似乎是单击表单的提交按钮时关闭键盘的 Web 应用程序的默认行为。

下面的 gif 显示了正在发生的事情。 如何防止这种默认行为？

https://gifyu.com/image/ABYn

Answer 1

这里的问题是每次单击发送按钮时， textarea失去焦点。 一旦textarea失去焦点，屏幕键盘就没有理由可见。 您可以通过向单击事件添加 javascript 代码来解决此问题，以便每次单击提交按钮后屏幕键盘都保留在那里。

您可以使用以下内容：

const form = document.querySelector(".typing-area"),
inputField = form.querySelector(".input-field"),
sendBtn = form.querySelector("button");

// PREVENT FORM SUBMISSION BY PAGE REFRESH (THE DEFAULT BEHAVIOUR)
form.onsubmit = (e)=> {
  e.preventDefault();
}

// ADD FOCUS TO INPUT FIELD BY DEFAULT (ON PAGE LOAD)
inputField.focus();

// PREVENT INPUT FIELD FROM LOOSING FOCUS AFTER SEND BUTTON IS CLICKED
sendBtn.onclick = ()=> {
  inputField.focus();
}