Question

我正在制作实时聊天应用程序，当用户在输入中键入内容并提交表单（单击发送按钮）时，键盘（移动设备上的虚拟键盘）消失了。

我想保持键盘打开。

<form class="panel" action="">
  <input type="text" class="message" id="message" autocomplete="off" spellcheck="false">
  <img src="upl.png" class="upload_img"/>
  <button type="submit" class="send" id="send"></button>
</form>

Answer 1

当输入元素失去焦点时，

键盘将关闭。

您可以尝试将焦点重新设置为提交时的输入元素。

https://jsfiddle.net/b6t540s9/

Answer 2

您可以尝试将服务器响应重定向到与表单位于同一页面的iframe。这样做可以避免在收到响应时重新加载页面（而是重新加载iframe中的页面）。

设置重定向

向表单分配一个 [target] attribute。
向页面添加iframe并为其添加[name]。
现在返回步骤＃1的[target]属性，并为其赋予与步骤＃2的[name]属性相同的值。

您应该具有以下内容：

 <form action='https://example.com/rx.php/post' method='post' target='response'>
  ....
   <iframe src='https://example.com/' name='response'></iframe>
 </form>

您很可能不希望大张旗鼓的iframe占用宝贵的空间（尤其是在移动页面上），因此包含在演示中的是隐藏上述iframe的方法。当然，有很多方法可以隐藏iframe并保持其正常运行，但是这种最有效的方式就是我。

设置隐藏

将iframe包裹在block level element中。
将一个类添加到block元素，并将该类的CSS属性/值分配给visibility: collapse。

演示大纲

首先单击提交按钮。您应该注意的第一件事是页面没有重新加载。该表格实际上发送到实时测试服务器。它会返回一个响应，以通知您200成功。
下一步，单击 Toggle 按钮。您应该看到带有服务器响应的iframe。切换按钮和JavaScript仅用于演示目的，不是必需的。

// This is for demonstration
const f = document.forms[0]
f.elements.toggle.onclick = toggleIframe;

function toggleIframe(e) {
  e.target.nextElementSibling.classList.toggle('overlay');
}

.overlay {
  visibility: collapse;
}

<form id='panel' action="https://www.hashemian.com/tools/form-post-tester.php" method='post' target='response'>
  <input name='message' autocomplete="off" spellcheck="false" type="text" value='TEST'>
  <!--toggle is for demonstration-->
  <input type="submit"><input id='toggle' type='button' value='Toggle'>

  <fieldset name='cover' class='overlay'>
    <iframe src='https://css-tricks.com' name='response'></iframe>
  </fieldset>
</form>

Answer 3

let form = document.getElementById("form");
let input = form.children["input"];
let send = form.children["send"];

form.addEventListener("submit", (e) =>
{
    // Use Ajax to send the message to php page.
    if (input.value.length !== 0)
    {
        console.log(input.value);
    }

    // Reset the input:
    input.value = "";

    // Disable the submit:
    e.preventDefault();
});

send.addEventListener("focus", (e) =>
{
    input.focus();
});

<form class="panel" id="form">
  <input name="input" type="text" class="message" autocomplete="off" spellcheck="false"/>
  <button name="send" class="send">S</button>
</form>

提交表单时键盘消失

3 个答案: