title: How can I focus on a text input without showing on-screen keyboard
body: <p>I'm making a chat service, and I want to support mobile devices well.</p>
  
  <p>On a screenshot below, there is an input field. It allows typing text, and to avoid issues like "if the text field is unfocused typing does nothing" it automatically gets focused when clicking outside of it - this does improve the experience on desktop computers. However, on devices with software keyboard, this causes on-screen keyboard to appear on mobile devices which is distracting.</p>
  
  <p><a href="https://i.stack.imgur.com/2l5e4.png" rel="noreferrer"><img src="https://i.stack.imgur.com/2l5e4.png" alt="enter image description here"></a></p>
  
  <p>Considering clicking anywhere focuses the text input, is it somehow possible to make on-screen keyboard only appear when the text field is pressed? Or alternatively, somehow detect devices with software keyboard enabled and disable this feature for them. Preferably without explicitly trying to detect mobile devices, touch screen or whatever as there exist touch screen devices with hardware keyboards.</p>
  
  <p>This issue I was able to reproduce in Google Chrome and Opera Mobile on Android, and apparently it happens on iPhones, although I have no device to test it on.</p>
  
  <p>Here is a rather simple example of an issue. If you touch the pink rectangle, it will cause touch keyboard to appear, which I don't want.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type=text id=f&gt;
  &lt;div style="background: pink; height: 200px; width: 200px" onclick="f.focus()"&gt;</code></pre>
  </div>
  </div>
  </p>