title: How to keep on-screen keyboard from disappearing when focus changes from one text field to another
body: <p>I've got an HTML5 app that uses a some input type="text" fields for entering text.  I am catching keystroke events in order to link together certain fields.</p>
  
  <p>I am having problems when testing this on any mobile device.  Initially I tried it on an iPad using Safari or Chrome. However, later I also tried it on an android device running the latest version of Mobile Firefox and experienced the same problem.</p>
  
  <p>The issue is that as soon as the input element changes, the on-screen keyboard goes away.  I have tried doing this in several different ways but it always seems to produce the same effect - as soon as I focus() on a different text input, the keyboard disappears.  This represents a serious impediment to flow, as it requires an extra motion to correctly re-select a text field that is already selected and should have focus and get keyboard input.  On a small device such as a phone it is even worse, as all of this is accompanied by zooming and panning as the removal and re-display of the keyboard causes the page to re-render.  This is similar in severity to what would happen if one's keyboard would stop working and require replugging every time one hit enter when editing a text document - it clearly would be a critical issue.</p>
  
  <p>The following minimal code reproduces the problem:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
    :focus { color: red; }
  &lt;/style&gt;
  
  &lt;script type="text/javascript"&gt;
  function init() {
  var tf1 = document.getElementById('tf1')
  var tf2 = document.getElementById('tf2')
  tf1.focus()                                                                                                                                         
  tf1.onkeydown = function(evt) {
      if (evt.which == KeyEvent.DOM_VK_RETURN
          || evt.which == KeyEvent.DOM_VK_Q
          || evt.which == KeyEvent.DOM_VK_ENTER) {
          tf2.focus()
          if (evt.stopPropogation) evt.stopPropogation()
          if (evt.preventDefault) evt.preventDefault()
          return false
          }
      }
  }
  &lt;/script&gt;
  &lt;body onload="init()"&gt;
  &lt;input type='text' id='tf1' value='field1' /&gt;
  &lt;input type='text' id='tf2' value='field2' /&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>First thing I note is that, while the initial focus() works (the element turns red) the on-screen keyboard does not appear.  While this is troubling, it is not a huge deal to tap to initially tap a text field.  However, as soon as I press any of the triggering keys (I have thrown an ordinary character in there to confirm that it doesn't matter what it is), suddenly the keyboard disappears.  This doesn't make any sense to me, not only is a text element still focused, which requires the on-screen keyboard, but it was a keyboard event that changed the focus, which would suggest that the keyboard might still be needed - it's not like I did this from a delay or something.</p>
  
  <p>I have tried onkeydown, onkeyup, and onkeypress - all exhibit the same behavior.</p>
  
  <p>How can I keep the on-screen keyboard from going away?  I have wasted a lot of time trying to get this one critical piece of functionality to work, and it still doesn't!  Is there some sort of meta-tag I need to include or something?  Or is the just a pervasive, cross-platform bug that all mobile devices have</p>