title: Android - html input loses focus when soft keyboard opens (ASP.net)
body: <p>I've written a web-page login form in ASP.net.</p>
  
  <p>Using a Nexus 4, stock Android 4.2.1, native Chrome browser - when I click on the <code>&lt;input&gt;</code> fields, the soft keyboard appears and then the field immediately loses focus. I have to click the <code>&lt;input&gt;</code> field again with the keyboard already open to actually enter text.</p>
  
  <p>This doesn't happen in Chrome on a desktop.</p>
  
  <p>I have the following login form in an ASP user control:</p>
  
  <pre><code>&lt;asp:Login ID="login_form" runat="server" OnLoginError="OnFail" OnLoggedIn="OnLoggedIn" RenderOuterTable="false" RememberMeSet="True"&gt;
      &lt;LayoutTemplate&gt;
  
          &lt;asp:Panel runat="server" DefaultButton="LoginButton" CssClass="members-login"&gt;
              &lt;fieldset&gt;
                  &lt;label for="UserName"&gt;Username&lt;/label&gt;
                  &lt;asp:TextBox ID="username" placeholder="e.g. joebloggs12" runat="server"&gt;&lt;/asp:TextBox&gt;
  
                  &lt;label for="Password"&gt;Password&lt;/label&gt;
                  &lt;asp:TextBox ID="password" runat="server" placeholder="e.g. 1234" TextMode="Password"&gt;&lt;/asp:TextBox&gt;
  
                  &lt;label id="RememberMe"&gt;Remember me&lt;/label&gt;
                  &lt;asp:CheckBox ID="RememberMe" runat="server" /&gt;
  
                  &lt;asp:Button CssClass="button" ID="LoginButton" runat="server" CommandName="Login" Text="SUBMIT" /&gt;
              &lt;/fieldset&gt;
          &lt;/asp:Panel&gt;         
      &lt;/LayoutTemplate&gt;
  &lt;/asp:Login&gt;
  </code></pre>
  
  <p>which appears to the browser like this:</p>
  
  <pre><code>&lt;div class="members-login" onkeypress="javascript:return WebForm_FireDefaultButton(event, &amp;#39;ContentPlaceHolderDefault_contentBody_masterContent_login_form_LoginButton&amp;#39;)"&gt;
  
      &lt;fieldset&gt;
          &lt;label for="UserName"&gt;Username&lt;/label&gt;
          &lt;input name="ctl00$ctl00$ctl00$ContentPlaceHolderDefault$contentBody$masterContent$login_form$username" type="text" id="ContentPlaceHolderDefault_contentBody_masterContent_login_form_username" placeholder="e.g. joebloggs12" /&gt;
  
          &lt;label for="Password"&gt;Password&lt;/label&gt;
          &lt;input name="ctl00$ctl00$ctl00$ContentPlaceHolderDefault$contentBody$masterContent$login_form$password" type="password" id="ContentPlaceHolderDefault_contentBody_masterContent_login_form_password" placeholder="e.g. 1234" /&gt;
  
          &lt;label id="RememberMe"&gt;Remember me&lt;/label&gt;
          &lt;input id="ContentPlaceHolderDefault_contentBody_masterContent_login_form_RememberMe" type="checkbox" name="ctl00$ctl00$ctl00$ContentPlaceHolderDefault$contentBody$masterContent$login_form$RememberMe" checked="checked" /&gt;
  
          &lt;input type="submit" name="ctl00$ctl00$ctl00$ContentPlaceHolderDefault$contentBody$masterContent$login_form$LoginButton" value="SUBMIT" id="ContentPlaceHolderDefault_contentBody_masterContent_login_form_LoginButton" class="button" /&gt;
      &lt;/fieldset&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p>My suspicion is that the ViewState is stealing focus somehow. But I tried <code>event.stopPropogation()</code> which didn't help.</p>
  
  <hr>
  
  <p><strong>Temporary fix</strong></p>
  
  <p>For now I've settled for a hacky fix, forcing focus back onto the <code>&lt;input&gt;</code> element 700 milliseconds after a click:</p>
  
  <pre><code>jQuery('input').bind('click',function(evt) {
      var focusClosure = (function(inputElem) {return function() {console.log(inputElem.focus());}}($(evt.target)));
      window.setTimeout(focusClosure, 700);
  });
  </code></pre>