防止在 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();
}