I am making real time chat app and when user types something in an input and submits a form(clicks a send button) a keyboard (virtual keyboard on mobile devices) disappear.

I want to keep the keyboard opened.

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

I am making real time chat app and when user types something in an input and submits a form(clicks a send button) a keyboard (virtual keyboard on mobile devices) disappear.

I want to keep the keyboard opened.

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

• javascript
• html

• I don't see how one can control the virtual keyboard on mobile devices in the browser. – anjanesh Commented May 26, 2019 at 12:28
• 3 Have you tried refocusing on the input? If you’re not in a text form field afaik the keyboard has no reason to be there. – Dave Newton Commented May 26, 2019 at 12:29

3 Answers 3

keyboard will close when the input element looses focus.

You can try setting the focus back to the input element on submit.

https://jsfiddle/b6t540s9/

You can try redirecting the server response to an iframe that's on the same page as the form. Doing so saves the page from reloading when a response is received (the page in the iframe gets reloaded instead).

Setup Redirect

1. Assign a [target] attribute to the form.

2. Add an iframe to the page and give it a [name].

3. Now go back to that [target] attribute from step #1 and give it the same value of the [name] attribute from step #2.

You should have something like this:

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

Most likely you'll probably don't want a gaping iframe eating up precious space (especially on a mobile page) so included in the demo is the means to hide said iframe. There are of course many ways to hide an iframe and still keep it functioning but this particular way I have the most success with.

Setup Concealment

1. Wrap iframe in a block level element.

2. Add a class to the block element and assign the class this CSS property/value: visibility: collapse.

Demo Outline

1. First click the Submit button. The first thing you should notice is that the page didn't reload. The form actually sends to a live test server. It sends a response back to notify you of a successful 200.

2. Next click the Toggle button. You should see an iframe with a response from the server. The toggle button and JavaScript is just for demonstration purposes and is not required.

// 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./tools/form-post-tester.php" method='post' target='response'>
  <input name='message' autoplete="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.' name='response'></iframe>
  </fieldset>
</form>

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" autoplete="off" spellcheck="false"/>
  <button name="send" class="send">S</button>
</form>