Android: la entrada de html pierde foco cuando se abre el teclado virtual (ASP.net)

He escrito un formulario de inicio de sesión en ASP.net.

Usando un Nexus 4, Android 4.2.1, navegador nativo de Chrome – cuando hago clic en los campos <input> , aparece el teclado virtual y luego el campo pierde inmediatamente el foco. Tengo que hacer clic de nuevo en el campo <input> con el teclado ya abierto para ingresar texto.

• Diferentes diseños de cuadrícula para retrato y paisaje en bootstrap
• ¿Cómo cambiar el contenido de EditText con Javascript?
• Simple html seleccionar no funciona en Android chrome
• La imagen no se puede mostrar en <input type = "file"> Android 4.0.4
• La dosis de Android Html.fromHtml () no funciona correctamente en estilo de texto anidado

Esto no ocurre en Chrome en un escritorio.

Tengo el siguiente formulario de inicio de sesión en un control de usuario ASP:

 <asp:Login ID="login_form" runat="server" OnLoginError="OnFail" OnLoggedIn="OnLoggedIn" RenderOuterTable="false" RememberMeSet="True"> <LayoutTemplate> <asp:Panel runat="server" DefaultButton="LoginButton" CssClass="members-login"> <fieldset> <label for="UserName">Username</label> <asp:TextBox ID="username" placeholder="eg joebloggs12" runat="server"></asp:TextBox> <label for="Password">Password</label> <asp:TextBox ID="password" runat="server" placeholder="eg 1234" TextMode="Password"></asp:TextBox> <label id="RememberMe">Remember me</label> <asp:CheckBox ID="RememberMe" runat="server" /> <asp:Button CssClass="button" ID="LoginButton" runat="server" CommandName="Login" Text="SUBMIT" /> </fieldset> </asp:Panel> </LayoutTemplate> </asp:Login> 

Que aparece al navegador como este:

 <div class="members-login" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'ContentPlaceHolderDefault_contentBody_masterContent_login_form_LoginButton')"> <fieldset> <label for="UserName">Username</label> <input name="ctl00$ctl00$ctl00$ContentPlaceHolderDefault$contentBody$masterContent$login_form$username" type="text" id="ContentPlaceHolderDefault_contentBody_masterContent_login_form_username" placeholder="eg joebloggs12" /> <label for="Password">Password</label> <input name="ctl00$ctl00$ctl00$ContentPlaceHolderDefault$contentBody$masterContent$login_form$password" type="password" id="ContentPlaceHolderDefault_contentBody_masterContent_login_form_password" placeholder="eg 1234" /> <label id="RememberMe">Remember me</label> <input id="ContentPlaceHolderDefault_contentBody_masterContent_login_form_RememberMe" type="checkbox" name="ctl00$ctl00$ctl00$ContentPlaceHolderDefault$contentBody$masterContent$login_form$RememberMe" checked="checked" /> <input type="submit" name="ctl00$ctl00$ctl00$ContentPlaceHolderDefault$contentBody$masterContent$login_form$LoginButton" value="SUBMIT" id="ContentPlaceHolderDefault_contentBody_masterContent_login_form_LoginButton" class="button" /> </fieldset> </div> 

Mi sospecha es que el ViewState está robando enfoque de alguna manera. Pero intenté event.stopPropogation() que no ayudó.

Arreglo temporal

Por ahora me he conformado con una corrección hacky, forzando el foco de nuevo sobre el elemento <input> 700 milisegundos después de un clic:

 jQuery('input').bind('click',function(evt) { var focusClosure = (function(inputElem) {return function() {console.log(inputElem.focus());}}($(evt.target))); window.setTimeout(focusClosure, 700); }); 

 // Move the navigation on resize $(window).bind('resize', function() { if(maxWidth <= 710px) { $('.nav').after($('.main-content')); } }); 

 $(window).bind('resize', function() { if ($("input").is(":focus")) { // input is in focus, don't do nothing or input loses focus and keyboard dissapears } else { // do whatever you should do if resize happens } }); 

 function getFocus(campo){ $(window).bind('resize', function() { if(windowWidth <= 1025) { $(campo).focus(); } }); } 

 $('input').click(function(){ getFocus(this); });