Android - entrée html perd le focus lorsque le clavier virtuel s'ouvre (ASP.net)
J'ai écrit une page web formulaire de connexion dans ASP.net.
À l'aide d'un Nexus 4, stock Android 4.2.1, natif du navigateur Chrome - quand je clique sur le <input>
champs, le clavier apparaît alors le champ perd le focus. J'ai cliquer sur le <input>
champ nouveau avec le clavier déjà ouvert à réellement saisir du texte.
Cela ne se produise pas dans Chrome sur un ordinateur de bureau.
J'ai suivantes formulaire de connexion dans un ASP de contrôle de l'utilisateur:
<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="e.g. joebloggs12" runat="server"></asp:TextBox>
<label for="Password">Password</label>
<asp:TextBox ID="password" runat="server" placeholder="e.g. 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>
qui semble le navigateur comme ceci:
<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="e.g. 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="e.g. 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>
Mon soupçon est que le ViewState est en train de voler l'accent en quelque sorte. Mais j'ai essayé event.stopPropogation()
qui n'a pas aidé.
Correctif temporaire
Pour l'instant, j'ai installé pour un hacky fixer, de forcer le focus sur le <input>
élément de 700 millisecondes après un clic:
jQuery('input').bind('click',function(evt) {
var focusClosure = (function(inputElem) {return function() {console.log(inputElem.focus());}}($(evt.target)));
window.setTimeout(focusClosure, 700);
});
- J'ai trouvé les mentions de des problèmes similaires mais ils semblent tous être de Java liées - dans les applications natives. Je ne trouve pas toutes les autres mentions de cette question à l'intérieur d'une page web.
Vous devez vous connecter pour publier un commentaire.
J'ai découvert ce n'est rien à voir avec ASP.net ou ViewState.
Lorsque le clavier Android s'affiche, le fenêtre du navigateur est redimensionnée - le déclenchement de la événement de redimensionnement.
Je courais quelque chose de similaire à la suivante:
Ce déplacé de la navigation dans les DOM. Je suppose que ce redessine les DOM et entraîne donc rien dans les DOM à perdre le focus. J'ai arrêté cela se passe sur redimensionner - il seulement se produire sur le chargement initial de la page à la place.
J'ai eu un problème similaire, mon approche pour prévenir le redimensionner à exécuter si l'entrée est dans le focus a résolu le problème:
I had a similar problem
, cette question n'est pas nouvelle, c'est une réponse valable.J'ai trouver d'autre solution
Vous devez d'abord créer une fonction
et lorsque vous cliquez sur une entrée d'appeler la fonction
Cela fonctionne pour moi
Nécessite jQuery
J'ai eu ce problème moi-même, et s'est terminée à l'aide de cette solution. Il pourrait être utile à quelqu'un d'autre. Dans mon cas, le redimensionnement fait en sorte que la barre de recherche perdu le focus.
Pour ceux qui sont confrontés à ce problème dans WordPress, insérez le code suivant dans l'en-tête.
J'ai eu le code personnalisé dans mon
$(window).resize(..)
que je voulais garder, et j'ai voulu restreindre cette solution de contournement, uniquement pour les cas d'utilisation impactés (mobile Android seulement, la Saisie de Texte ou TextArea) donc je suis venu avec cette:et puis j'ai modifié mon $(window).redimensionner(..) comme ceci: